Deep understanding of absolute CSS positioning, deep understanding of CSS positioning

Deep understanding of absolute CSS positioning, deep understanding of CSS positioning
* Directory [1] define [2] features [3] display [4] clip [5] in front of overflow

We have already introduced the positioning offset and stack. In this example, a large number of applications have applied absolute positioning. Compared with relative positioning and fixed positioning, absolute positioning has a higher application frequency and wider application scenarios. This article describes the details of absolute positioning.

 

Definition

When the element is absolutely positioned, it is completely deleted from the document stream. The element position is relative to the nearest located ancestor element. If the element has no located ancestor element, its position is relative to the initial containing document, and its boundary is placed according to the offset attribute. After the element is located, a block-level box is generated, regardless of the type of box it generated in the normal stream. The positioning element does not flow into the content of other elements, and vice versa.

[Note] if the document can be rolled, the absolute positioning element will scroll with it, because the element will eventually be located relative to a part of the normal stream.

// When you scroll the scroll bar, you will find that the absolute positioning element will scroll along with it, but the fixed positioning will not

 

Features

Both absolute and float can trigger the BFC attribute of the element, and both of them are encapsulation and destructive. Therefore, for some application scenarios, these two attributes can be replaced. The detailed information about the float attribute is now

[1] package

After the element is absolutely located, an inclusion block is created for its child element. If the width of the absolute positioning element is not set, the width is extended by the content.

[Note] floating contained blocks extend, and then contain all child floating elements. However, the absolute positioning of contained blocks does not contain the child positioning elements, but serves as the parent level of the Child positioning element.

[2] destructive

After the element is absolutely positioned, it will be out of the Document Stream. If the parent level does not set the height, the parent level height will collapse. If the parent level is a row element, there is no other content, the parent width will also collapse.

// The parent element has a 10px padding and the background color is sky blue.

[3] floating

After the element is absolutely positioned, the original floating effect of the element will become invalid.

[4] offset Characteristics

If the top, right, bottom, and left offsets are used to describe the placement of the four sides of an element, the height and width of the element are implicitly determined by these offsets, the element is stretched.

The absolute position element that is stretched using the offset property. Its internal elements support the percentage width/height value. In general, the height percentage of the element must not be auto for the parent window to take effect. However, if the container is formed by absolute position stretching, the percentage height value is also supported.

 

Display

When the element is absolutely positioned, the element can change the display attribute, but the resolution of Each browser is inconsistent.

[1] IE8 + normal browser resolution

[2] firefox and safari will be re-rendered only when they are switched to display: none. Other values are not valid when they are switched to each other.

[3] rendering is invalid when chrome switches to display: inline. rendering is normal when other values are switched.

[4] IE7-the browser renders all absolutely positioned elements as inline-block elements, and re-renders the elements only when the value is switched to display: none. Other values are not valid when they are switched to each other.

[Note] It is easy to solve the bug that IE7-the browser absolutely locates the element and renders it as an inline-block element. You only need to set an empty <div> outside the absolutely positioned element.

<div>    <div style="position:absolute"></div></div>

 

Clip

The clip attribute can only be used for absolute or fixed positioning elements. Absolute positioning elements are often used with the clip attribute to hide the elements. The detailed information about the clip attribute is now

.hide{    position:absolute;    clip: rect(0,0,0,0);}

 

Overflow

When overflow is between an absolute positioning Element and Its contained block, the absolute positioning element is not clipped by the parent overflow attribute. The solution to overflow failure is now

You can apply the overflow attribute of the absolute positioning element to the effect of an external button.

.box{    width: 100px;    height: 100px;    overflow: auto;}    .in{    width: 100%;    display: inline-block;    height: 200px;    background-color: pink;}.close{    position:absolute;    margin: 0 0 0 -20px;    font-size: 20px;    line-height: 20px;    border: 2px solid;    border-radius: 50%;    cursor:pointer;}

<Div class = "box"> <div class = "in"> test content </div> <! --> <Span class = "close"> & times; </span> </div>