Understanding absolute positioning and relative positioning layouts

[P=22, NULL, left] Overview:
This paper mainly describes the nature, usage, difference and relationship between the relative and absolute positions in XHTML. And how to lay out anchored block-level elements using the left, right, Top, bottom properties (offset properties) and margin properties (margins) of CSS.

[P=22, NULL, left] Description:
Placeholder space: The space that the element occupies in the document flow.
Physical space: The space occupied by the element itself.
[P=22, NULL, left] the relative positioning and absolute positioning are discussed in 3 different situations:
1. Use only CSS first set of property layouts to position elements
2. Use only CSS second set of property layouts to position elements
3. Mixed use of first and second sets of properties
[P=22, NULL, left] Figure 1 is the initial effect of the undecided bit,
The hierarchy relationship is:
<div
<div Box1
<div Box2
<div Box3

[P=22, NULL, left] One, the layout block-level element with relative positioning
Element Set position value: position:relative
The setting of this property value, whether the element is not out of the document flow or part of the normal flow positioning model, affects the layout of other elements in the document flow. (Description: Blue for placeholder space, red for element)

[P=22, NULL, left] 1. Use only left, right, top, and bottom property layouts to position elements relative to each other
The space occupied by the element is still reserved and the physical space is offset.
[P=22, NULL, left] Figure 2, setting the left and top values of the element, laying out the box2, you can see that in addition to the Box2 offset, the position of the other block-level elements is not affected, and there is a visible box2 placeholder space.
The hierarchy relationship is:
<div
<div Box1
<div box2--–position:relative; top:-60px; left0px;
<div Box3

[P=22, NULL, left] 2. Use only the Margin property layout to position elements relatively
Setting negative values with the Margin-bottom property and the Margin-top property can change the height of the space occupied by the document flow, affecting the location of other elements in the document flow. For example: margin-top: Negative value; Margin-bottom: Negative value
[P=22, NULL, left] in Figure 3, both Box1 and Box2 set the value of the element Margin-bottom, which equals the negative value of their height. The physical space of the box1 and Box2 has not changed, occupying a space height of 0. The Margin-bottom value of the BOX3 is set to 0, the physical space is not changed, and the placeholder space is the same height. The left offset value is then set to Box2 and Box3 via Margin-left.
The hierarchy relationship is:
[P=22, NULL, left]
<div
<div box1--–position:relative; margin-bottom:-102px;
<div box2--–position:relative; margin-bottom:-102px; margin-left:110px;
<div box3--–position:relative; margin-bottom:0px; margin-left:220px;

[P=22, NULL, left] 3. Mixed use of left, right, top, and bottom properties to position elements relative to the margin property layout
In this case, their values produce an additive effect. In CSS2.1, all browsers use margin boundaries to complete offset calculations. In this paper, we understand the value of the offset and margin attributes from a mathematical perspective.
[P=22, NULL, left] Figure 4, Box2 is the effect of setting the left value on the basis of Figure 3, and the value of the margin-left is visible, and the value of the left is accumulated. (Offset 0px = 110px–30px)
The hierarchy relationship is:
<div
<div box1 ——-position:relative; margin-bottom:-102px;
<div Box2 ——-position:relative; margin-bottom:-102px;margin-left:110px; flet:-30px;
<div Box3 ——-position:relative; margin-bottom:0px; margin-left:220px;

[P=22, NULL, left] second, the layout block-level elements with absolute positioning
Set position value: Position:absolute;
This property value is set, and the element is completely removed from the document stream.

[p=22, NULL, left]1. Only use left, right, top, and bottom property layouts to absolutely position elements
The offset position of an absolutely positioned element is a reference to the nearest position (including relative positioning and absolute positioning) of the ancestor element. If an element does not have an ancestor element that has been positioned (including relative positioning and absolute positioning), then its reference is the top-level element (the object may be a body or HTML element, depending on the browser's default reference).
Note: The reference under IE must be set width or height bottom and the right property can be correctly positioned.
[p=22, NULL, left] after the element is absolutely positioned, the left, right, top, and bottom properties of the element are defaulted to the default value of 0, leaving the element out of the document flow only. The following example illustrates this problem.
in Figure 5, the orange ancestor element is set to the positioning element (that is, the reference), Box2 is set to absolute positioning, the document flow from Box1-box2-box3 to Box1-box3, can box2 but not moved to the distance reference 0 value position, visible box2 left, The default value of the right, top, and bottom properties is not equal to 0, it is just out of the document flow.
Hierarchy is:
<div ——————————— position:relative reference
  <div —————————-not set to anchor element, not reference
     <div ———————-not set to anchor element, not reference
      <div box1
       <div box2--–absolute
      <div box3

[P=22, NULL, left] with the nearest ancestor positioning element as a reference case
In Figure 6, Box2 is set to an absolutely positioned element, out of the document flow, and the document flow is changed from Box1-box2-box3 to Box1-box3,box2 with the nearest position ancestor (blue box) as the reference.
The hierarchy relationship is:
<div ——————————— position:relative; Not the nearest ancestor-positioning element, not a reference.
<div —————————-not set to anchor element, not reference
<div ———————-position:relative Reference
<div Box1
<div Box2--–position:absolute; top:50px; left:120px;
<div Box3

[P=22, NULL, left] Figure 7, the effect of changing the reference (Orange box)
The hierarchy relationship is:
<div ——————————— position:relative; The nearest ancestor-positioning element, reference
<div —————————-not set to anchor element, not reference
<div ———————-not set to anchor element, not reference
<div Box1
<div Box2--–position:absolute; top:50px; left:120px;
<div Box3

[P=22, NULL, left] Figure 8, the reference is the top-level element case.
The hierarchy relationship is:
<div ——————————— not set to anchor element, not reference
<div —————————-not set to anchor element, not reference
<div ———————-not set to anchor element, not reference
<div Box1
<div Box2--–position:absolute; top:50px; left:120px;
<div Box3

[P=22, NULL, left] 2. Use only the Margin property layout to position elements absolutely
In this case, the values of Margin-bottom and margin-right no longer affect the elements in the document flow because the element has been detached from the document flow. In addition, regardless of whether its ancestor element is positioned, it is offset from the original position in the document stream.
[P=22, NULL, left] Figure 9, use the Margin property layout to position elements relative to each other.
The hierarchy relationship is:
<div ——————————— position:relative; Not a reference.
<div —————————-not set to anchor element, not reference
<div ———————-not set to anchor element, not reference
<div Box1
<div Box2--–position:absolute; margin-top:50px; margin-left:120px;
<div Box3
[img=1,1] [/IMG]

[P=22, NULL, left] In the case of IE6, there is no sibling node in front of Box2, then the value of Margin-left appears double margin, as shown in Figure 10.
The hierarchy relationship is:
<div ——————————— position:relative; Not a reference.
<div —————————-not set to anchor element, not reference
<div ———————-not set to anchor element, not reference
<div Box1
<div Box2--–position:absolute; margin-top:50px; margin-left:60px;
<div Box3

[P=22, NULL, left] 3. Mixed use of left, right, top, and bottom properties to position elements relative to the margin property layout
The A.margin property is used in conjunction with the top, bottom, left, and right properties, and if offset in the same direction, their values produce an additive effect, as shown in Figure 11.
For example: margin-left:120px; left:-20px; Then the offset value of Box2 is 120px-20px=100px;
The hierarchy relationship is:
<div ———————————-not a reference.
<div ————————— – not a reference
<div ——————— –position:relative; Reference
<div Box1
<div Box2 ——— Position:absolute; margin-left:120px; left:-20px; top:50px;
<div Box3

[P=22, NULL, left]b. Absolute positioning and relative positioning of the additive effect is different, if the top, bottom, left, and the margin property offset in the opposite direction, the top, bottom, left, and right property values are valid, The value of the margin property in the opposite direction is invalid, as shown in Figure 12.
The hierarchy relationship is:
<div ———————————-not a reference.
<div ————————— – not a reference
<div ——————— –position:relative; Reference
<div Box1
<div Box2 ——— Position:absolute; margin-left:120px; right:10px; top:50px;
<div Box3
Summarize:

Relatively positioned elements are not separated from the document flow, occupy the space of the document flow, left; right; Blending the top and bottom properties with the margin property produces an additive effect.

An absolutely positioned element is detached from the document flow, and the offset does not affect other elements in the document flow, left; right; The top and bottom properties are mixed with the margin property, with the same value accumulated in the offset direction, in the opposite direction, and the margin property value is invalid.

An absolutely positioned element is a reference to the nearest positioned ancestor element.

Understanding absolute positioning and relative positioning layouts