In html page can be viewed as a three-dimensional space, a complete page is deposited by a number of pages is formed, as shown in FIG.
Position the CSS property has four possible values, which are: static, absolute, fixed, relative.
◆ position: static-free positioning
The property value is the default positioning of all the elements, in general, we do not need to declare it special, but sometimes encounter case of the inheritance, we do not want to see the effects of the elements inherited property itself, so you can use position: static canceled inheritance, namely restore defaults element positioning.
Normal block generation element. Block-level elements generate a rectangular frame, as part of the document stream, inline elements is created one or more line boxes, placed in the parent element.
◆ position: absolute absolute positioning
Use position: absolute, can be very accurate element is moved to the position you want, elements of the document flow completely removed from the frame and positioned relative to its containing block. Containing block may be another element in the document is initially contained or blocks. Original elements in the normal flow of the document space occupied will be closed, as if the elements of the original does not exist. Generating a block-level element positioned after the frame, regardless of what type of frame it had generated in the normal stream.
◆ position: fixed with respect to the fixed positioning of the window
The positioning of the property value What does it mean? Targeting elements with similar absolute, but its containing block is the viewport itself. In screen media such as WEB browser, the element does not move in a browser at the time of inspection document scrolling. For example, it allows the frame layout style. Media such as page printout, a fixed element will appear in the same position of the first page. This can be used to generate the flow header or footer. We have seen a similar effect, but the effect is not the number of mostly be achieved through CSS, but the application of the JS script.
◆ position: relative relative positioning
The so-called relative positioning in the end is what this means, it is based on where a relative? We need a clear concept, relative positioning element is positioned relative to the default position. Since it is relative, we need a different set of values to declare locate where, top, bottom, left, right with the four values, to clarify the position of the element.
A block element offset distance. Element shape before their remains unlocated, the space it had occupied remains.