Css layout positioning series: relative positioning

Translation: 0. For details, refer to the source and address of the original English text! Due to my limited level of English, please read the original article if you do not understand it!
Relative positioning
When an element is specified as {position: relative;}, it begins to comply with normal stream rules (that is, if you do not give it any rules, he is just like normal, the translator's note), and the elements around it are positioned accordingly. Then, the element box is offset based on its property value.
Note that the boxes around the above elements are normally laid out, including vertical margin folding. Therefore, relatively positioned elements may overwrite other elements.
Browser compatibility
The browser has differences in the method of processing the relative positioning element to overwrite other elements. Unfortunately, W3C standards do not specify how to handle this issue.
Therefore, relative positioning elements such as IE5.5 and Netscape6.0 are displayed on the elements around them. The rest, such as Opera5.0, will use the default stack command. Instead, it will display the relative positioning element before the element first in the document stream, and then after the element.
Stack commands are described in detail in the absolute positioning reference. However, please note that you can use the z-index attribute to set the display order (the greater the value of z-index, the more front the element is displayed !)
You can use the top, right, left, and bottom attributes together to set the offset value of the relative positioning element. Each attribute value is interpreted as the distance between the outer border of the element and the original normal position.
Note that these offset values are constrained. For example, if you set the values of the left and right attributes at the same time, if the values of one element are not the opposite values of the other values (for example, 4 and-4 ), the value of the right attribute is ignored. Setting a specific width value may also cause the offset value to be ignored. This rule applies to the top, bottom, and height attributes.
In practice, you may set only one of left, right, and one of top and bottom.
Subnode Positioning (Descendant Positioning)
Whether a relative positioning element creates a new inclusion block to locate (relative positioning or absolute positioning) subelements are uncertain. They follow the same rules as non-positioning elements.
If the relative positioning element is a block-level element, it creates a new inclusion block. The element in it uses the offset of the element as the base position. That is to say, the offset of a child element is a composite value (including the block offset plus its own offset)
If the relative positioning element is a row-class element, its offset has no relationship with its child element. On the contrary, it shares the same parent-level inclusion block with its child element.
Browser compatibility
In the original W3C standard declaration, the relative positioning element always creates an inclusion block. However, the subsequent standard corrected this statement, indicating that the relative positioning element is the same as the common element.
Some browsers include this correction, but some do not. Due to this difference, you may want to avoid this situation, always using a block-level element for relative positioning.