Understanding absolute position and relative position

Values 1 and Position

1. Values

Position: static/absolute/fixed/relative
Static: static absolute: absolute location fixed: fixed relative: relative location

By default, the static object does not have a special location. The object follows the HTML location rule.

Absolute:	Extract objects from the Document StreamExtract, Use left, right, top, bottom, and other attributes for absolute positioning. Its stack is defined by the Z-index attribute. At this time, the object does not have margins, but still has padding and border.
Relative:	Objects cannot be stacked, but will be offset in normal document streams based on left, right, top, bottom, and other attributes.
Fixed:	E5.5 and ns6 do not yet support this

2. Understand values of relative and absolute

(1) Relative

Do not deviate from the document stream, objects cannot overlap, and attributes such as left; right; top; bottom (four with at least one specific value) are offset in the normal Document Stream (in other words,)

(2) Absolute

Exit the Document Stream and use left; right; top; bottom (four have at least one specific value) and so on. The parent object with the most positioning settings is absolutely located. If the parent object does not set the positioning attribute, the HTML positioning rules will be followed, positioning with the upper left corner of the body as a reference,

Objects that are absolutely located can overlap, and the stacked order can be passed throughZ-IndexAttribute control, larger than above

Ii. Differences between relative and absolute

1. Whether it is completely out of the Document Stream

2. Relative is relative to its own offset location, and absolute is relative to the parent-level object with the latest location settings for absolute location

3. Whether objects can overlap (Z-index changes the hierarchical relationship)

 

[Off-the-question] recently, a lot of positioning has been used. For example, to make the navigation menu look a little special through relative positioning, there are still some effects, couplet-style ad suspension boxes, and back to the top. Good, good study, daydayup!

Understanding absolute position and relative position