Understanding position Five properties in CSS

In the actual development of the page layout, the use of position, the positioning of the block-level elements of the nesting effect is always not very understanding, here to do a few tests

In general, we can easily get a definition in the list:

Static: The default value. No positioning, elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations).

Fixed: Generates an absolutely positioned element that is positioned relative to the browser window. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.

Inherit: Specifies that the value of the position property should be inherited from the parent element.

Absolute: creates an absolutely positioned element that is positioned relative to the first parent element other than the static anchor. the position of the element is defined by the "left", "Top", "right" and "bottom" attributes.

Relative: Creates a relative positioned element, positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the left position of the element.

Overall:

static , is the normal document flow sequence, the default, equivalent to no positioning!

fixed , is relative to the browser window, is your scroll bar how to scroll, he is still that position, think is "sticky" on the window!

　　inherit , is the value of the Position property inherited from the parent element,

Absolute , is the original position of the out-of-document flow is not to continue to occupy, if his parent element has been positioned in either absolute or relative, it will be relative to his parent element to locate, If his parent element is not positioned, then it is positioned relative to the body. That is to say absolute definitely has the reference!

relative , is not out of the original position of the document flow will continue to occupy, it is only relative to their original position to locate!

The first three are easy to understand, for the combination of absolute and relative, several tests have been done

Testing (absolute and relative)

1. Separate absolute and relative

Relative in Relative,absolute in 2.relative

Absolute in absolute,relative in 3.absolute

　　

<! DOCTYPE html>
In fact, many times, the online experience, a lot of miscellaneous, their own practice, to really understand
Understanding position Five properties in CSS