How to realize absolute Positioning in Css
This article will explain in detail how to achieve absolute positioning of Css. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.
The element box that is set to absolute positioning is completely removed from the document stream and is positioned relative to its containing block, which may be another element in the document or an initial containing block. The space previously occupied by the element in the normal document stream is closed as if the element did not already exist. The element is positioned to generate a block-level box, regardless of what type of box it originally generated in the normal flow.
The position of the absolutely positioned element is relative to the nearest positioned ancestor element, and if the element does not have a positioned ancestor element, then its position is relative to the original containing block.
Because absolutely positioned boxes are independent of the document flow, they can override other elements on the page. You can control the stacking order of these boxes by setting the z-index property.
When the position of box2 is set to absolute, it is detached from the document as if it does not exist.
Absolute positioning
.box {
Width: 200px
Height:100px
Border: 1px solid # F00
Float: left
Margin:0 0 0 30px
}
.box2 {
Position: absolute
Left: 20px
Top: 50px
}
Box1
Box2
Box3
This is the end of the article on "how to achieve absolute positioning in Css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.
