How to manipulate dynamic element size through CSS positioning
This article mainly introduces "how to operate dynamic element size through CSS positioning". In daily operation, I believe many people have doubts about how to operate dynamic element size through CSS positioning. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubt of "how to operate dynamic element size through CSS positioning". Next, please follow the editor to study!
Tips for not using width and height or JS to provide elements for volume.
This is a very simple technique, but many people don't know it.
Suppose you want to make a mode box that contains all the screens except 100px for each screen. How would you solve this problem?
Suppose you want to make a modal box that covers all screens, how would you solve this problem except for the 100px of each boundary?
HTML
Somecontent
First we need to add an attribute position:fixed to our div.
Then we want to position the mode box 100px from each side of the viewport. Why shouldn't we give it all 4 position attribute parameters (top, right, bottom, left)?
The solution is that you can give all four parameters for fixed / absolute positioning, top:100px,right:100px,bottom:100px;left:100px;.
By doing so, you can make the dynamic element size accordingly from each side of the 100px.
CSS
.popup {
Position:fixed
Z-index:5
Left:100px
Right:100px
Top:100px
Bottom:100px
/ * somestyles*/
Background-color:#ccc
Border-radius:10px
Border:solid3px#000
Padding:20px
}
The result div is an automatic size mode box without a row of JS.
Complete code:
.popup {
Position:fixed
Z-index:5
Left:100px
Right:100px
Top:100px
Bottom:100px
Background-color:#ccc
Border-radius:10px
Border:solid3px#000
Padding:20px
}
Text content
Now, suppose you want to add a mask under the mode box, exactly the same idea!
Here is the solution:
HTML:
CSS
.mask {
Position:fixed
Z-index:2
Left:0
Right:0
Top:0
Bottom:0
Background-color:rgba (0. 0. 8)
}
Complete code:
.popup {
Position:fixed
Z-index:5
Left:100px
Right:100px
Top:100px
Bottom:100px
Background-color:#ccc
Border-radius:10px
Border:solid3px#000
Padding:20px
}
.mask {
Position:fixed
Z-index:2
Left:0
Right:0
Top:0
Bottom:0
Background-color:rgba (0. 0. 8)
}
Text content
At this point, the study on "how to manipulate the size of dynamic elements through CSS positioning" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
