CSS Magic Hall: Position positioning detailed

First, position each attribute value detailed

1. static : The default value, the elements will be arranged according to normal document flow rules.

2. relative : Relative positioning, elements are still in the normal flow of the document, but can change the position of elements through CSS rules for left, top, right, and bottom.

Note the point: [A]. The original position of the element will be preserved and not occupied by other elements;

[b]. When using left,top to change the position of the element, the element will be the reference point in the upper left corner of the border outer border of the original position;

[C]. When you change the position of an element using right and top, the element will be used as the reference point in the upper-left corner of the border outer border of the original position;

[d]. When you change the position of an element using left and bottom, the element will be the reference point in the lower-right corner of the border outer border of the original position;

[E]. When you change the position of an element using right and bottom, the element will be the reference point in the lower-left corner of the border outer border of the original position;

3. absolute : absolute positioning, elements out of normal document flow, can change the position of elements through CSS rules of left, top, right and bottom

Note the point: [A]. Elements will no longer occupy the original position;

The variable x is defined here, and the following uses x instead of the reference point

Condition: When the offsetparent of the element is body and the body does not make CSS positioning, then x= the page;

In other cases, X=offsetparent's border outer box.

[b]. When using left,top to change the position of the element, the element will be in the upper left corner of X or as a reference point;

[C]. When you change the position of an element using right and top, the element will be the reference point in the upper-left corner of X;

[d]. When you change the position of an element using left and bottom, the element will be the reference point in the lower-right corner of X;

[E]. When you change the position of an element using right and bottom, the element will be the reference point in the lower-left corner of X;

4. fixed: fix position, element out of normal document flow, can change the position of element through CSS rules of left, top, right and bottom

Note the point: [A]. Elements will no longer occupy the original position;

[b]. Use the four corners of the viewable area of the browser as the reference point.

[C]. Ie5.5~6 does not support this property value.

can use JS to repair, for dragging the scrollbar element flash treatments The bug needs to be handled by the following CSS.

*html{     background-image:url (About:blank);     Background-attachment:fixed;}

Or

body{     _background-image:url (about:blank);     _background-attachment:fixed;}

Ii. what is out-of-document flow

Leaving the document flow means that the document location is no longer occupied.

Third, what is CSS positioning

CSS positioning, is the element of the position is not static. This element will be the offsetparent of its parent-child element and the opportunity to become the offsetparent of its grandchild element.

Iv. Summary

CSS positioning seemingly simple, but also easy to ignore the details, this article as far as possible to record the study, I hope that we can together to enrich.

Respect the original, reprint please indicate from: http://www.cnblogs.com/fsjohnhuang/p/3967350.html ^_^ Fat Boy John

CSS Magic Hall: Position positioning detailed