Detailed CSS positioning and positioning application

Positioning has always been a difficult point in the application of Web standards, if you do not understand the positioning of the possible implementation of the effect can not be achieved, the effect may be out of shape. 　　If you clear the principle of positioning, that positioning will make the Web page to achieve a more perfect. Definition of positioning:

The content of positioning in CSS is: position:relative | Absolute | static | Fixed

Static does not have a special setting, follow the basic positioning rules, can not be through Z-index hierarchical classification.

Relative does not break away from the document flow, referencing its own static position through top,bottom,left,right positioning, and can be hierarchically graded through Z-index.

Absolute out of the document stream and positioned through top,bottom,left,right. When the parent position is static, the absolute element is positioned at the origin of the body coordinate and can be hierarchically graded through Z-index.

Fixed positioning, where he fixed the image as a visual window rather than a body or a parent element. The hierarchy can be graded through Z-index.

Cascading ratings for positioning in CSS: Z-index:auto | Namber;

Auto complies with its parent object's positioning

Namber An integer value that has no units. Can be a negative number

The principle of positioning:

Elements that can be shifted (relative positioning)

In this stream, any element is limited by the text stream itself, but through CSS we still make these elements can change their position, we can float to let the elements floating, we can also through the margin to let the elements create position to move. But in fact that's not the real shift, because that's just a distraction from increasing the margin value. And the true meaning of the displacement is through Top,right,bottom,left (hereinafter called TRBL,TRBL can be used to fold. ) is generated for a relatively positioned element. Let's look at the following figure:

　　

We look at the picture is a width of 200px, height of 50px,margin:25px; border:25px solid #333; padding:25px; Relative positioning of the elements, and the displacement distance of 50px, from the left 50px. The bottom is a black block that is positioned by default. We see that this block of text flow is blocked by the relative positioning of the above, which means that "when the elements are set relative or absolute, the cascade is automatically generated, and their cascade level is naturally higher than the text stream." Unless you set its Z-index value to be negative, it will not appear when Z-index is negative in browsers such as Firefox. And we find that when the relative positioning element is shifted, the performance content has been separated from the text stream, but the original relative alignment is left with the original total width and total height (content height or width plus marginorderpadding value). This shows that in the relative positioning, although the expression area is separated from the original text flow, but also in the text stream there is the relative positioning of the old hive. This should be particularly noted, because in practical applications if the relative positioning of the displacement value is too large, then the original region will form a blank.

[1] [2] Next page