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

This article shares with you the content of an example analysis of absolute positioning in CSS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Locating an element is not so much the location of the element itself as the container location of the element. In order to be able to locate itself, it must know which parent div it will position relative to.

The following code shows four nested div, .box-1 to .box-3 centered only through display: flex and margin: auto. Box-4 has no margin set and is in the default location in the document stream.

None of the elements have the position attribute set

Body {display: flex;}. Box-1,.box-2,.box-3 {display: flex; margin: auto;}

.box-4 is in the default location

If an element wants to position itself, it must know two things:

The value set by top, right, bottom, left

Relative to which parent element to locate

When we added the position: absolute attribute to .box-4, we found that it was detached from the normal document stream. Without setting the location property, it just stays in the default location, which is the upper-left corner of the parent container.

The position of the box-4 has no offset when it is absolutely positioned.

By adding top: 0 and left: 0, the element must know which element will serve as the reference container for positioning. You can see that the element here is located in the upper left corner of the screen. Box-4 first checks whether its parent container has the position property set. At first, it found that .box-3 did not set positioning properties, then it moved on to .box-2 and .box-1, and found that none of them set available position properties.

In the end, .box-4 could not find a parent element that could be used to locate the reference, and finally had to use body as the positioning reference. The element is finally located in the upper-left corner of the screen:

.box-4 is absolutely positioned, and all parent elements have no position attribute set.

When we set position: relative for .box-1, .box-4 found a location reference available. And finally realize the positioning relative to .box-1:

.box-4 absolute positioning, .box-1 relative positioning, .box-2 and .box-3 unchanged

The absolute positioning element will position itself relative to its nearest ancestor element.

Once an available ancestor element is found, other elements will no longer be associated with it (such as box2 and box3). The following picture shows the effect of setting position:relative for .box-2 and .box-3, respectively:

.box-4 absolute positioning, .box-2 and .box-3 relative positioning

Thank you for reading! This is the end of this article on "sample analysis of 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, you can 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.