A detailed introduction to absolute positioning and relative positioning in CSS

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
：

To change the effect of 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
：

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
：

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.
In Figure 9, you 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
：

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
：