Cssposition:absolute Comprehensive understanding of the analysis

I. Characteristics of absolute positioning

Absolute positioning has the same characteristics as floating, that is, enveloping and destructive.

In terms of destruction, floating only destroys the height of the element, retains the width of the element, and the absolute positioning of the element height and width are not.

Take a look at the following code:

<!         DOCTYPE html>

Ii. general rules for absolute positioning:

When an element is absolutely positioned, it is completely detached from the document flow and is positioned relative to its containing block.

An absolutely positioned containing block, which is the closest positioned ancestor of the element.

If the ancestor element is a block-level element, the containing block is the inner margin boundary of the ancestor element, that is, the bounding rectangle.

If the ancestor element is an inline element, the containing block is the content boundary of the ancestor element, that is, the content area.

If there is no ancestor element that has been positioned, the containing block of the element is defined as the initial containing block.

Offset properties: Top, right, bottom, left.

If an absolutely positioned element does not have an offset property set, the position is not moved, although it is out of the document flow.

The offset property can be a negative value, positioning the element outside the containing block.

Here's the code:

<! DOCTYPE html>

Third, adjust the position of absolute positioning element with margin

Absolutely positioned elements, in addition to being able to offset using top, right, bottom, and left, can be precisely positioned with margin values and are better adaptive.

Example:

<! DOCTYPE html>

Discarding the offset attribute instead of using margin to adjust the absolute positioning element is the principle of:

An absolutely positioned element that, while not set at offset, is completely out of the document stream, but it is still in its original position.

The exact location of the offset attribute is determined by the inclusion block of the absolutely positioned element, which will have a completely different positioning result.

The use of margin for precise positioning, not dependent on anything else, more controllable.


Iv. absolute positioning and overall layout

How to use absolute positioning to the overall layout of the page?

Simple rough, not learn to waste!!!

<! DOCTYPE html>

The above CSS Position:absolute comprehensive understanding is the small part of the whole content to share to everyone, I hope to give you a reference, but also hope that we support topic.alibabacloud.com.