Position positioning of CSS Elements

value	attributes
inhert	specifies that the value of the position attribute should be inherited from the parent element.
static	default value . The element is not located and appears in the normal stream (ignore the top, bottom, left, right, or Z-index declarations ).
relative	generates relative positioning elements, which are located relative to the normal position of the element . Therefore, "Left: 20" adds 20 pixels to the left position of the element.
absolute	generates absolute positioning elements and locates the element relative to the first ancestor element other than static positioning . The positions of elements are specified by the "Left", "TOP", "right", and "bottom" attributes.
fixed	Generate absolute positioning elements, relativeBrowser window. The positions of elements are specified by the "Left", "TOP", "right", and "bottom" attributes.

CSS has three basic Positioning Mechanisms: normal stream, floating and absolute positioning.

Normal streams are located by default. The position of element boxes in a normal stream is determined by the position of elements in HTML, when the element position attribute is static or inherited static, It will be located according to the normal stream, which is also our most common method.

Relative positioning is relatively simple. It corresponds to the relative value of the position attribute. If a relative positioning is performed on an element, it will appear at its location. Then, you can set the vertical or horizontal position, move this element relative to itself,When relative positioning is used, no matter whether the elements are moved or not, the elements occupy the original space in the Document Stream, but the performance changes.

Normal stream: <Div style = "border: solid 1px #0e0; width: 200px;"> <Div style = "height: 100px; width: 100px; Background-color: red; "> </div> <Div style =" height: 100px; width: 100px; Background-color: green; "> </div> <Div style =" height: 100px; width: 100px; Background-color: red; "> </div>
 

 
Relative positioning: <Div style = "border: solid 1px #0e0; width: 200px;"> <Div style = "height: 100px; width: 100px; Background-color: red; "> </div> <Div style =" height: 100px; width: 100px; Background-color: green; position: relative; top: 20px; left: 20px; "> </div> <Div style =" height: 100px; width: 100px; Background-color: red; "> </div>
 

As shown in the above example, the relative position of the green div is shifted to the right, and the position of the second red Div does not change after the 20 PX move, but is in the original position, the green Div blocks some red Div.

 

Relative positioning can be considered as a special normal stream positioning. The element position changes relative to its position in the normal stream, whileAbsolute positioning makes the element position irrelevant to the Document Stream and does not occupy the Document Stream space. The element layout in a normal stream is like that of an absolute positioning element does not exist.

The position of an absolute element is determined by the position of the non-static ancestor element closest to the element.If the element does not have an ancestor element that has been located, its position is relative to the element that initially contains a block (body or HTML.

Because absolute positioning is irrelevant to the Document Stream, the absolute positioning element can overwrite other elements on the page and control the stacked order through the Z-index attribute. The higher the Z-index, the closer the element is to the top.

Let's make a slight change to the previous example so that the green div is absolutely positioned. To make it clear, the second red div is changed to yellow.

<Div style = "border: solid 1px #0e0; width: 200px; position: relative;"> <Div style = "height: 100px; width: 100px; Background-color: red; "> </div> <Div style =" height: 100px; width: 100px; Background-color: green; position: absolute; top: 20px; left: 20px; "> </div> <Div style =" height: 100px; width: 100px; Background-color: yellow; "> </div>
 

At this time, we can see that the green div is relative to the parent element, that is, the shift of the Green Box Div, and the layout of the red and yellow div is like the green Div does not exist.

 

The final point is the fixed attribute. The application fixed is also called fixed positioning. Fixed positioning is absolute positioning, and fixed positioning elements are not included in the normal document stream, the difference is that the content of the bitter Ding element is the viewport. It is often seen that the module of online friends on some pages is always in the lower right corner of the window. It is estimated that similar technologies are used.

 
Fixed positioning: <Div style = "border: solid 1px #0e0; width: 200px;"> <Div style = "height: 100px; width: 100px; Background-color: red; "> </div> <Div style =" height: 100px; width: 100px; Background-color: green; position: fixed; bottom: 20px; left: 20px; "> </div> <Div style =" height: 100px; width: 100px; Background-color: yellow; "> </div>
 

It can be seen that the hongse and yellow Div la s are not affected by the Green Div, and the green div is always in the lower left corner of the respective page scroll bar at the top or bottom of the page.