CSS floating absolute positioning and relative positioning

HTML is loaded according to the way the file stream (document flow), but all is the document flow, many good-looking style is not realized, so there is floating, relative positioning, absolute positioning concept.

First, according to the document flow and non-document flow to classify:

① document Flow: is arranged in the order of the upper and lower left and right, the length is not enough will automatically squeeze to the next line.

② Non-document flow: As the name implies, it is out of the document flow, which is not occupied in the document flow. CSS has a position style, position includes: static,relative,absolute,fixed four kinds of values. Where static is part of the document flow, relative is also a special document flow, detailed below is described below; Absolute and fixed and float are non-document streams, and when loaded, they are loaded sequentially, but leave the location of the document stream.

Second, introduce static,relative,absolute,fixed and float (by Top,left,right,bottom to set relative positioning)

①static: Is the default document flow, do not manually set the position style, the default is static;

②relative: Called relative positioning, refers to the relative position of his own original position, and the original position is occupied (so it belongs to a special document flow), the other elements will not be filled up, but set the relative position, his new position will not squeeze other elements, It's like keying the element out of its original position and laying it on a separate layer.

③absolute: The ① is the absolute positioning of the position relative to its parent element, but he belongs to the non-document flow, ② the original position is not occupied, is a separate layer, out of the document flow. In addition to the above two points, the other and relative similar.

④fixed: Called fixed positioning, refers to the element relative to the browser window positioning (such as some sites on both sides of the ads), pull the scroll bar, he will not follow the move, also belongs to the non-document flow, the other is similar to relative.

⑤float: Called floating, CSS is a separate style, there are top,right,bottom,left four common values, the above four are belong to position one; Float is also a document flow, which changes the flow of the document. He can only flow on the same level as the document, but it is possible to change the position of the element, the same position (and relative a bit like), not a single layer (and relative,absolute,fixed will be a separate layer, you can set the Z-index property to change its front and back position). After using float, the element is out of the document stream, the element is no longer occupied in the document flow, the elements of the document flow will be filled up, so that if you do not set up, there will be overlapping coverage, if you want to use the elements of float also occupy the position of the document flow, how to do? You can then apply the clear style to the elements immediately following the element that has the float style applied, and the clear style includes: Both,right,left three values. Both says that both right and left float are cleared away, and the other two are the same. This way you can clear the previous non-document flow, so that they also occupy the position of the document flow, but this is only a position, in fact, the element does not exist in that position, there is no element in the location (the details of their own Google understand), but this way, the next element wants to set the margin, etc. There is a problem, because the element that has the float style applied to that position is actually nothing, there is no boundary, so the application margin will not be the boundary of that element (the one with the float applied), it would skip that boundary to calculate, Of course you can also make the margin larger (that is, the length or width of the float element) can also achieve the effect. In fact, it is possible to add a <div style= "Clear:both" > clear element to clear the float before the element after float, and the next element applies the margin to function normally (supplementary: in fact, in general, You can set them separately in the style sheet. Clear{clear:both; This style is designed to be used specifically to clear floats, avoid duplication, and code that is much more elegant and prescriptive.

　　　　

Iii. the role of Z-index

Can be used to handle the front and back positions of non-document flow elements, the larger the Z-index, the more the elements are in front (meaning when there is both document flow and non-document flow).

Iv. Some differences between block elements and inline elements

The ① block element has the Width,height attribute, while the inline element does not;

② each block element is automatically occupied by default, and the row is packed by default to continue to the next line;

The ③ element in the CSS with "Display:block" can make the element into a block element;

......

This article from http://www.cnblogs.com/ismallboy/p/5256184.html

CSS floating absolute positioning and relative positioning