CSS Layout Positioning series: relative positioning

CSS English original: http://brainjar.com/css/positioning/default.asp

Translation: 0 degrees, reproduced please indicate the original source of this article and the address of this article! Because my English proficiency is limited, there is no understanding of the place also please read the original, Welcome to exchange!

Relative positioning

When an element is indicated as {position:relative;} , it starts with a normal flow rule (that is, if you don't give him any rules, he's just like normal, the translator), and the elements around it are positioned accordingly. The element box is then offset by its property value.

Note that the boxes around the above elements are normally laid out, including the folding of the vertical margins, so elements with relative positioning are likely to overwrite other elements.

Browser compatibility
Browsers differ in how the relative positioning elements are overwritten with other elements. Unfortunately, the standard of the consortium does not indicate how this problem should be addressed.
So, like IE5.5 and Netscape6.0, the relative positioning elements are displayed above the elements around him. The rest, such as Opera5.0, will use the default stack instruction, which is to display the relative positioning element in the document stream before it appears in front of the element, before it appears behind it.
The stack instruction is described in detail in the absolute positioning reference. Note, however, that you can use the Z-index property to set its display order (the larger the value of the Z-index, the more the element will display!)

You can use the Top,right,left and bottom four properties together to set the offset value of a relative positioning element. Each property value is interpreted as the distance from the outer border of the element to the original normal position.

Please note that these offset values are constrained. For example, suppose you set the value of the left and right attributes at the same time, if the value of one of the elements is not the opposite of another value (such as 4 and-4, the translator), then the value of the property will be ignored. Setting a specific width value may also cause the offset value to be ignored. This rule also applies to the Top,bottom and Height properties.

In practice, you will most likely only set any one of the left,right and Top,bottom.

Sub-node positioning (descendant positioning)

Whether a relative positioning element creates a new containing block to locate (relative positioning or absolute positioning) child elements is indeterminate, and they adhere to the same rules as the non positioned elements.

If the relative positioning element is a block-level element, it creates a new containing block. The elements inside it use the offset of the element as the base position. That is, the offset of the child element is a compound value (including the block offset plus its own offset)

If the relative positioning element is a row-class element, its offset has nothing to do with its child elements, and instead it shares the same parent-containing block as its child elements.

Browser compatibility

The initial standard of the consortium declares that relative positioning elements always create a containing block. However, the following standard fixes the declaration by pointing out that the relative positioning element is the same as the normal element.

There are some browsers that include this fix but some do not. Because of this difference, you may want to avoid such a situation, always using a block-level element for relative positioning.