CSS positioning (relative positioning and absolute positioning)

You can use position:relative to offset the element from its current position in the arrangement order
You can use Position:absolute to offset the element from the current position of the order or the closest ancestor element to the location
To offset an element reference window with position:fixed

Floating and clearing

Question: You want to remove an element from the normal order and make it appear on the left or right side of the parent element. You want to parse it as a block element and arrange it in the area surrounded by the inner margin of the parent element. You also want to arrange the top of it based on the original extraction location. You also want to control other floating elements or non floating content in your neighborhood, or move them below yourself.

Solution:

Using Float:left and Float:right
Rules for floating positioning with float:none overlay of other elements
The anchor layer position of the floating element is above the block element and is adjacent to the inline content in the normal arrangement. The left float is indented on its right side, and the right float is indented on its left side.
Floating does not affect the positioning of the Block box model, only their inline content.
Use Clear:left to move a block element or other floating element to the left of the floating element below it
Use Clear:right to move a block element or other floating element to the right of a floating element below it
Use Clear:both to move a block element or other floating element on either side of a floating element to the following

Relatively floating

Problem: Want to offset the float from its current position without affecting other elements, including other floating elements and inline content. You also want to control the stacking order of floating elements (between floating elements or between and other positioned elements).

Solution: Use position:relative to position the floating elements relative to each other. The relative float also retains the element's position in the original floating order, and only offsets it from its original position with left and top. The relative float is also parsed at the location layer, allowing you to use Z-index to control its stacking order relative to other floating elements and positioned elements. Because a relative float is also a way of locating an element, its absolute descendants can be positioned relative to it.

The hierarchy relationship is:
<div ——————————— position:relative; Not the nearest ancestor-locating element, not the reference.
<div —————————-is not set to the positioning element, not the reference
<div ———————-position:relative Reference
<div Box1
<div Box2--–position:absolute; top:50px; left:120px;
<div Box3
Effect Chart:

To change the effect of the reference (orange frame)
The hierarchy relationship is:
<div ——————————— position:relative; Recent ancestor positioning elements, reference
<div —————————-is not set to the positioning element, not the reference
<div ———————-is not set to the positioning element, not the reference
<div Box1
<div Box2--–position:absolute; top:50px; left:120px;
<div Box3
Effect Chart:

The reference is the top level element case .
The hierarchy relationship is:
<div ——————————— is not set to the positioning element, not the reference
<div —————————-is not set to the positioning element, not the reference
<div ———————-is not set to the positioning element, not the reference
<div Box1
<div Box2--–position:absolute; top:50px; left:120px;
<div Box3
Effect Chart:

To use only 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:
<div ——————————— position:relative; It's not a referential.
<div —————————-is not set to the positioning element, not the reference
<div ———————-is not set to the positioning element, not the reference
<div Box1
<div Box2--–position:absolute; margin-top:50px; margin-left:120px;
<div Box3
Effect Chart:

In the case of IE6, the Box2 has no sibling nodes, then the Margin-left value will appear in double margins, as shown in Figure 10.
The hierarchy relationship is:
<div ——————————— position:relative; It's not a referential.
<div —————————-is not set to the positioning element, not the reference
<div ———————-is not set to the positioning element, not the reference
<div Box1
<div Box2--–position:absolute; margin-top:50px; margin-left:60px;
<div Box3
Effect Chart: