[Daily] detailed explanation of CSS positioning

CSS position: absolute and relative

Position: absolute
Drag an object out of the Document Stream and use the left, right, top, bottom, and other attributes to absolutely locate the parent object with the most specific positioning settings relative to the object. If such a parent object does not exist, it is based on the body object. Its stack is defined by the Z-index attribute. The Z-index value is an unmeasured integer, which is at the top of the list and can have negative values.
At this time, the object does not have an external patch (margin), but it still has an internal patch (padding) and a border (Border ).
To activate the absolute (absolute) Positioning of an object, you must specify at least one of the Left, right, top, and bottom attributes. Otherwise, the property will use their default value auto, which will cause the object to follow the normal HTML layout rules and be presented immediately after the previous object

Position: relative
Refer to the upper left corner of the content area of the parent level (most recently) as the original point combined with the trbl attribute (top, right, bottom, left) positioning (or offset relative to the last element of the element to be located in the parent content area), the upper left corner of the body is the original point without a parent level. Relative positioning cannot be stacked. When relative positioning is used, elements still occupy the original space regardless of whether the elements are moved or not. Therefore, moving an element overwrites other boxes. You can also use the Z-index hierarchical design.

When multiple positions are nested:
The effect of the position attribute value is directly affected by the position attribute value in the container style.
For example, the nested structure of the following A-B
<Div id = "A">
<Div id = "B">
</Div>
</Div>
When the position of a is relative, the position of B is absolute. At this time, left: 0 and top: 0 are no longer for the window document, but for the DIV with ID.
Http://www.awflasher.com/blog/archives/731

From the application perspective, relative is often used for container elements containing absolute elements.
By default, the absolute element uses the body as the container element for absolute positioning.
If you want to perform absolute positioning in a specific area of the page, you can wrap a layer of container elements outside the absolute element to apply the relative style.

CSS normal stream:
When the browser starts rendering the HTML document, it starts from the top of the window and passes through the entire document content process to allocate the space required by the element. Unless the document size is limited by CSS, the browser vertically expands the document to accommodate all the content. Each new block-level element is rendered as a new row. The elements in the row are horizontally rendered in order until the current row encounters a boundary and then switched to the next vertical rendering line. This process becomes a normal document stream.

Publish via wiz