Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.