Example demonstrates the absolute positioning and relative positioning layout of div+css

Profile:
This paper mainly describes the nature, usage, difference and relationship between relative positioning and absolute positioning in XHTML. And a way to lay out block-level elements by using the left, right, top, bottom properties (offset properties) of the CSS and the Margin Property (outer margin). (For an example of this article, see this attachment demo.) )

Description
Placeholder space: The space that an element occupies in the document stream.
Physical space: The space occupied by the element itself.

Relative positioning and absolute positioning are discussed in 3 different cases:
1. Position elements only using CSS first set of property layouts
2. Position elements only using CSS second group of property layouts
3. Mixed use of the first and second group of attributes

Figure 1 is the initial effect when the position is undecided,
The hierarchy relationship is:

Effect Chart:

Figure 1

First, using relative positioning layout block-level elements
Element Set position value: position:relative
The setting of this property value, whether the element is not detached from the document flow or part of the normal flow positioning model, affects the layout of other elements in the document flow. (Note: Blue represents placeholder space, red represents element)

1. Use only left, right, top, and bottom property layouts relative to positioned elements
The occupied space of the elements is still retained and the physical space is offset.

In Figure 2, the left and top values of the elements are set, and the box2 is laid out so that the position of the other block-level elements is not affected except for the Box2 offset, which is visible in the Box2 space.
The hierarchy relationship is:

Effect Chart:

Figure 2

2. Using only the Margin property layout relative to the positioning element
Setting a negative value with the Margin-bottom property and the Margin-top property can change the height of the space occupied in the document flow and affect the position of other elements in the document flow. For example: margin-top: Negative; Margin-bottom: Negative

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 Box1 and Box2 has not changed, and the space height is 0. The Margin-bottom value of the BOX3 is set to 0, the physical space is unchanged, and the space of the placeholder is unchanged. Then set the left offset value for Box2 and Box3 by Margin-left.
The hierarchy relationship is:

Effect Chart:

Figure 3

3. Mixing the left, right, top, and bottom properties with the Margin property layout relative to the positioning element
In this case, their values produce an additive effect. All browsers in CSS2.1 use the outer margin boundary to complete the offset calculation. In this paper, we understand that the offset attribute value and the outer margin attribute value are accumulated from the mathematical perspective.

In Figure 4, the Box2 is based on Figure 3 to increase the effect of setting the left value, and the value of the visible margin-left and left are cumulative. (offset: 80px = 110px-30px)
The hierarchy relationship is:

Effect Chart:

Figure 4

Block-level elements with absolute positioning layout
Set position value: Position:absolute;
The setting of this property value that the element is completely removed from the document stream.

1. Only use left, right, top, and bottom properties to lay out absolutely positioned elements
The offset position of an absolutely positioned element is a reference to the ancestor element of the nearest position, including relative positioning and absolute positioning. If an element does not have an ancestor element that is positioned (including relative positioning and absolute positioning), its reference is the top-level element (because the default reference for the browser is different, the object may be a body or an HTML element).
Note: IE under the reference need to set the width or height bottom and right properties to correct positioning.

When the

Set element is an absolutely positioned element, the left, right, top, and bottom property defaults for the element are not 0, except that the element is detached from the document stream. The following example illustrates this problem.
in Figure 5, the orange ancestor element is set to the anchor element (that is, the reference), the Box2 is set to absolute positioning, the document flow changed from Box1-box2-box3 to Box1-box3, Box2 is not moved to the position of the value of reference 0, visible box2 left, The right, top, and bottom properties default value is not equal to 0, it is just out of the document stream. The
hierarchy is:

  

  The    

      

       

      

Effect diagram:

Figure 5

In the context of the nearest ancestor-locating element
In Figure 6, the Box2 is set to an absolute positioning element, leaving the document flow, and the document flow changed from Box1-box2-box3 to Box1-box3,box2 with the nearest location ancestor (blue box) as the reference.
The hierarchy relationship is:

Effect Chart:

Figure 6

Figure 7, to change the effect of the reference (orange frame)
The hierarchy relationship is:

Effect Chart:

Figure 7

In Figure 8, the reference is the top-most element case .
The hierarchy relationship is:

Effect Chart:

Figure 8

2. Only use the margin property to lay out absolutely positioned elements
In this case, the values for Margin-bottom and margin-right no longer affect the elements in the document flow because the element has been detached from the document stream. In addition, regardless of whether its ancestor element is positioned, it is offset by the original location in the document stream.

Figure 9, use the Margin property layout relative to the positioning element.
The hierarchy relationship is:

Effect Chart:

Figure 9

In the case of the

IE6, there is no sibling node in front of the Box2, then the Margin-left value will appear in double margins, as shown in Figure 10. The
hierarchy is:

  

The     

      

      

      

Effect diagram:

Map

3. Mixed use of the left, right, top, and bottom properties to position elements relative to the margin property layout
A. The margin property is used at the same time as the top, bottom, left, and right properties, and their values produce an additive effect if the same direction is offset, as shown in Figure 11.
For example: margin-left:120px; left:-20px; then the Box2 offset value is 120px-20px=100px;
Hierarchical relationship is:

  

    < Div ——————— –position:relative; Reference
      

      

      

Effect diagram:

Diagram by

B. The additive effect of absolute and relative positioning is different, if the top, bottom, left, right, and margin property offsets in the opposite direction, the top, bottom, left, and right property values are valid, and the margin property values in the opposite direction are not valid, as shown in Figure 12.
The hierarchy relationship is:

Effect Chart:

Figure 12

Summarize:

• Relatively positioned elements do not break out of the document stream, occupy the space of the document flow, left; right; The combination of top and bottom properties with the margin property can have an additive effect.
• An absolutely positioned element is detached from the document stream, 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, the offset direction is the same, and in the opposite direction, the margin property value is invalid.
• Absolutely positioned elements are based on the nearest locating ancestor element.