This example demonstrates the absolute positioning and relative positioning layout of div + css.

Summary:
This article mainly describes the nature, usage, difference, and relationship between relative positioning and absolute positioning in XHTML. You can also use the Left, Right, Top, Bottom attributes (offset attribute), and Margin attributes (Margin) of CSS to layout block-level elements. (For the example in this article, see this appendix demo .)

Note:
Placeholder space: space occupied by elements in the Document Stream.
Physical space: space occupied by elements.

The relative positioning and absolute positioning are discussed in three cases:
1. Only use the first group of css attribute layout to locate the element
2. Only use the second set of css attribute layout to locate the element
3. Mixed use of the first group and second group attributes

Figure 1 shows the initial effect when no position is specified,
Hierarchical relationship:
<Div
<Div box1
<Div box2
<Div box3
:

Figure 1

1. Use relative positioning to layout block-level elements
Element setting position value: position: relative
The setting of this attribute value does not affect the layout of other elements in the Document Stream because the element is not separated from the document stream or is part of the normal stream locating model. (Description: blue represents the placeholder space, and red represents the element)

1. Only use the left, right, top, and bottom attribute layout to locate the element.
The original placeholder space occupied by the element is retained, and the physical space is offset.

In Figure 2, you can set the left and top values of the element to deploy box2. In addition to the box2 offset, the positions of other block-level elements are not affected, it can be seen that the placeholder space of box2 still exists.
Hierarchical relationship:
<Div
<Div box1
<Div box2 --- position: relative; top:-60px; left: 80px;
<Div box3
:

Figure 2

2. Only use the margin attribute to layout relative positioning Elements
Setting a negative value using the margin-bottom attribute and the margin-top attribute can change the height of the space occupied by the Document Stream and affect the location of other elements in the Document Stream. Example: margin-top: negative value; margin-bottom: negative value

In Figure 3, box1 and box2 both set the value of the element margin-bottom, and the value is equal to the negative value of their height. The physical space of box1 and box2 is not changed, and the height of the placeholder space is 0. The box3 margin-bottom value is set to 0, the physical space is not changed, and the height of the placeholder space remains unchanged. Then, use margin-left to set the left offset value for box2 and box3.
Hierarchical relationship:
<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;
:

Figure 3

3. When the left, right, top, and bottom attributes are used together with the margin attribute layout to locate the elements
In this case, their values will produce a cumulative effect. All browsers in CSS2.1 use the outer margin boundary to complete offset calculation. From a mathematical point of view, this article describes how to accumulate the offset property value and the margin property value.

In Figure 4, box2 is the result of adding the left Value Based on Figure 3. It can be seen that the value of margin-left and the value of left are accumulated. (Offset: 80px = 110px-30px)
Hierarchical relationship:
<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;
:

Figure 4

2. Use absolute positioning to layout block-level elements
Set the position value: position: absolute;
This attribute value is set, and elements are completely deleted from the document stream.

1. Use only the left, right, top, and bottom attributes to absolutely locate the element.
The offset position of the absolute positioning element refers to the ancestor element of the nearest positioning (including relative positioning and absolute positioning. If the element does not have an ancestor element that has been located (including relative and absolute positioning), its reference object is the top-level element (because the browser's default reference object is different, object may be a BODY or HTML element ).
Note: You must set the width or height bottom and right attributes for the reference object in IE to locate the object correctly.

After an element is set to an absolute positioning element, the default value of the Left, Right, Top, and Bottom attributes of the element is not 0, but the element is only removed from the document stream. The following example illustrates the problem.
In Figure 5, set the orange ancestor element to the positioning element (I .e. the reference object), box2 to the absolute location, the document flow is changed from box1-box2-box3 to box1-box3, box2 is not moved to the position of 0 from the reference object. It can be seen that the default value of Left, Right, Top, and Bottom of box2 is not 0, but it is just out of the Document Stream.
Hierarchical relationship:
<Div ----------- position: relative reference object
<Div ---------- not set as a positioning element, not a reference object
<Div -------- not set as a positioning element, not a reference object
<Div box1
<Div box2 --- absolute
<Div box3
:

Figure 5

Situation where the latest ancestor positioning element is used as a reference object
In Figure 6, Box2 is set to an absolute positioning element, out of the Document Stream, the Document Stream is changed from box1-box2-box3 to box1-box3, and box2 is referenced by the nearest positioning ancestor (blue frame.
Hierarchical relationship:
<Div ----------- position: relative; not the latest ancestor positioning element, not a reference object
<Div ---------- not set as a positioning element, not a reference object
<Div -------- position: relative reference object
<Div box1
<Div box2 --- position: absolute; top: 50px; left: 120px;
<Div box3
:

Figure 6

In Figure 7, to change the effect of the reference object (orange box)
Hierarchical relationship:
<Div ----------- position: relative; the last ancestor positioning element, reference object
<Div ---------- not set as a positioning element, not a reference object
<Div -------- not set as a positioning element, not a reference object
<Div box1
<Div box2 --- position: absolute; top: 50px; left: 120px;
<Div box3
:

Figure 7

In figure 8,Conditions where the reference object is the top-level element.
Hierarchical relationship:
<Div ----------- not set as a positioning element, not a reference object
<Div ---------- not set as a positioning element, not a reference object
<Div -------- not set as a positioning element, not a reference object
<Div box1
<Div box2 --- position: absolute; top: 50px; left: 120px;
<Div box3
:

Figure 8

2. Only use the margin attribute layout to absolutely locate the element
In this case, the values of margin-bottom and margin-right no longer affect the elements in the Document Stream, because the element is already out of the Document Stream. In addition, whether the ancestor element is located or not, the reference object is shifted from the original position in the Document Stream.

Figure 9 uses the margin attribute to layout relative positioning elements.
Hierarchical relationship:
<Div ----------- position: relative; not a reference object
<Div ---------- not set as a positioning element, not a reference object
<Div -------- not set as a positioning element, not a reference object
<Div box1
<Div box2 --- position: absolute; margin-top: 50px; margin-left: 120px;
<Div box3
:

Figure 9

In IE6, if there are no sibling nodes in front of box2, the value of margin-left will have double margins, as shown in figure 10.
Hierarchical relationship:
<Div ----------- position: relative; not a reference object
<Div ---------- not set as a positioning element, not a reference object
<Div -------- not set as a positioning element, not a reference object
<Div box1
<Div box2 --- position: absolute; margin-top: 50px; margin-left: 60px;
<Div box3
:

Figure 10

3. When the left, right, top, and bottom attributes are used together with the margin attribute layout to locate the elements
A.The margin attribute and the top, bottom, left, and right attributes are used at the same time. If they are offset in the same direction, their values will produce a cumulative effect, as shown in Figure 11.
For example: margin-left: 120px; left:-20px; then the box2 offset value is 120px-20px = 100px;
Hierarchical relationship:
<Div ------------ not a reference object
<Div ---------- not a reference object
<Div -------- position: relative; reference object
<Div box1
<Div box2 --- position: absolute; margin-left: 120px; left:-20px; top: 50px;
<Div box3
:

Figure 11

B.The effect of adding parameters for absolute positioning and relative positioning is different. If the top, bottom, left, right attributes and the margin attribute offset are in the opposite direction, the top, bottom, left, and right attribute values are valid, the value of the margin attribute in the opposite direction is invalid, as shown in Figure 12.
Hierarchical relationship:
<Div ------------ not a reference object
<Div ---------- not a reference object
<Div -------- position: relative; reference object
<Div box1
<Div box2 --- position: absolute; margin-left: 120px; Right: 10px; top: 50px;
<Div box3
:

Figure 12

Summary:

• The relative positioning elements are not separated from the document stream and occupy the space of the Document Stream. The combination of Left; Right; Top and Bottom attributes and margin attributes will produce a cumulative effect.
• The absolute positioning element is out of the document stream. The offset does not affect other elements in the Document Stream. The Left; Right; Top and Bottom attributes are used in combination with the margin attribute. The offset direction is the same as the value, and the offset direction is the opposite, the value of the margin attribute is invalid.
• The absolute positioning element refers to the closest positioning ancestor element.