What is the document flow?
The form is divided into a top-down line by line, and each line from left to right by the emission elements, namely the document flow.
Only three cases will make the elements from the document flow, namely: floating, absolute and relative positioning.
Static positioning (static):
static, no special positioning, which is the default html element positioning a way that we do not set the default position when the value attribute of the element position is static,
it follows the normal flow of the document object, the object space occupied by the document , this positioning mode, top, right, bottom, left , z-index attributes is invalid.
Relative positioning (relative):
relative positioning relative offset its original position in the document flow carried out, and we know that relative positioning is to follow the normal flow of the document,
it does not flow from the document, but its top / left / right / bottom property is in effect, you can say it is an intermediate static properties to absoulte transition,
most importantly, it occupies a document space, and space is not occupied by the document with the top / right / left / bottom and other properties offset change occurs,
that is to say it is the basis behind the elements (before top / left / right / bottom attributes take effect) the broken line position for positioning, and this point must be understood.
Well, we know that the top / right / left / bottom property is not misaligned relative positioning of the elements of the document space occupied,
then the margin / padding will make the document space to generate offset it? The answer is yes
absolute positioning (absoulte):
absoulte positioning, also known as absolute positioning, although its name Xiao Yue "absolute", but its function was more close to the "relative" is, why do you say it?
It turned out that the use of the positioning elements from absoult document flow, can only be positioned in accordance with the ancestor elements (parent above), and this must be the ancestor class is
postion positioned non-static manner, for example, using the A element absoulte positioning, it will start from the parent class to start looking, looking to position a non-static
ancestor element positioned (note that it must be considered a direct ancestor oh) until the <html> tag so far, there is also to be noted that, relative and
static manner outermost layer is <body> tag positioning the origin, but in the absence of absoulte parent mode is a non-static position is positioned <html>
as the home position. <html> and <body> element difference of about 9px.
Haha, after reading the above code, attentive friends will certainly have to ask, why absoulte positioned to add top: 0; left: 0; Property, which it is not superfluous?
In fact, add these two properties is absolutely necessary, because if we use absoulte or fixed positioning, it must specify the left, right, top, bottom
attribute at least one, or left / right / top / bottom property will use them the default value is auto, which will cause the object to conform to the normal HTML layout rules,
Immediately after presenting an object in front, simply, is turned into relative, will take up the document space, it is very important to a lot of people after using absolute positioning
found no documents from the stream is for this reason, special note here ~ ~ ~
to see I understand, margin will subclass ancestor class absoulte followed offset, while the padding will not make a subclass of absoulte shifted.
To sum up, it is absoulte are doing so based on border ancestor class.
Fixed positioning (fixed):
fixed positioning, also known as fixed positioning, positioning it as absoult are out of the normal flow, and can be positioned as top, right, left, bottom attribute,
but the difference is fixed according to the window origin offset positioning, which means it will not be shifted according to the scroll of the scroll bar.
z-index property:
z-index, also known as lamination order of the objects, which is defined by an integer stack level, the greater the integer value, were laminated in the above, of course, this refers to the same level between the stack elements,
If this attribute two objects have the same value, the order in which they will be based on the HTML document flowing laminate, will be written on the back of the front cover. Note that the
parent-child relationship can not be set with the vertical z-index relationship, the lower must be the child from the parent.
Note: the use of static or no positioning element positioned z-index property position is invalid.
Reference Documents
https://blog.csdn.net/chen_zw/article/details/8741365
http://www.cnblogs.com/dolphinX/archive/2012/10/13/2722501.html