Detailed explanation of CSS positioning and positioning applications

Css

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 total width and the total height (the height or width plus margin\border\padding of the content) have been left in the present flow. 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.

And we note that the coordinate point of the positioned element is the top left edge of the margin value, the point B in the graph. Then the calculation of all displacements will be based on this point to promote the elements. When the TRBL is positive, the direction of the displacement is cohesive, and by some extrapolation, the direction of the displacement is out when the TRBL is negative. The arrow pointing at the picture has a shift direction, with the plus sign being the positive displacement orientation, and the negative displacement direction with the minus sign. On the direction of displacement, can be extended reading Yiwen fly margin properties (i)

Elements that can be in any one position (absolute positioning)

As mentioned above: relative positioning can only move up or down the position in the text stream, there is also a certain limitation, although his performance area is separated from the text stream, but in the text stream is still reserved for its place, it is like a part-time worker he went to the field, but still in his hometown there is a special position belonging to him, This position should not be changed by his movement. But this obviously will empty a blank, if you want the text stream to discard this part of the need to use absolute positioning, absolute positioning is not only out of the text stream, and in the text stream will not give the absolute positioning element left empty, this is like a factory workers, If a worker goes, there will be other workers to fill the position. And the moving part naturally becomes a free body. Absolute positioning will be able to set the element in any one location by TRBL. When the parent position property is the default, the coordinate origin of the TRBL starts with the coordinate origin of the body. Look at the picture below:

The figure above shows that the contents of the text stream will replace the absolute positioning of the position of no element, not at all polite. And the absolute positioning element is naturally stacked on top of the text stream. In a single absolute position, the positioning element will run to the upper-left corner of the Web page, because it is where they have been absolutely positioned as the origin of the coordinates.

Absolute location associated with

The above is pure absolute positioning, and in practical applications we often need to use a special form. That is, you want the positioning element to have an absolute positioning of the characteristics, but also want the absolute location of the coordinate origin can be fixed at a certain point in the Web page, when the point is moved by the absolute position of the element is expected to ensure relative to the original coordinates relative position. That is, you need this absolute location to move with the page, and it's a fixed location on the page. This effect is especially important when the page is centered. The basic way to achieve this effect is to set the parent of this absolute location to relative positioning. The absolute positioning coordinates begin with the parent as the coordinate starting point.

This is true, but the origin of this coordinate is not the parent's coordinate origin, which is a very strange coordinate position. Let's look at the Model diagram:

We see that the parent in this graph is a black gray block, and the child is a cyan block. The parent is relative positioning, and the child is absolutely positioned. The child sets the top displacement to 50 pixels, and the left-left displacement is 50 pixels. So we see that the origin of the coordinates of the child is not 50 pixels from the parent's coordinate origin, but rather from the upper-left edge point of the parent block as the starting point of the coordinate padding. Where the parent is to generate position movement, or the size of the browser window changes will not affect the absolute positioning element and the parent of relative positioning elements between the position relationship. This child also does not have to adjust the value.

This is a very special and very practical way to apply. If you are not comfortable with the positioning of the control, I believe that after reading the positioning of the interpretation of the location can be used to the arbitrary.

Elements that are always in sight (fixed positioning)

Because of the overflow of advertising, so that some browser software began to have the advertising content interception, so that some good results are not recommended to use now. For example, an element may change its position as the page scrolls. And now I can use a CSS in a positioning attribute to achieve such an effect, this element attribute is once unsupported position:fixed; His meaning is: fixed positioning. This fixation is similar to absolute positioning, except that absolute positioning is fixed to a certain position in the Web page, while fixed positioning is fixed in the browser's viewport position.

Although the original browser does not support the properties, but the development of the browser so that the current advanced browser can correctly parse the CSS properties. and through CSS hack to make IE6 can achieve this effect (currently cannot make ie5.x) achieve this effect. In order not to make this article a lengthy one, this is the end of the article. Some questions about this example can be analyzed by ourselves. There is no understanding of the place can give me a message!

Positioning applications

Run Code Box

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" ><pead> <meta http-equiv= "Content-type" content=; Charset=utf-8 "/> <meta http-equiv=" content-language "content=" ZH-CN "/> <meta name=" Design Corp "content=" Jonmax.com "/> <meta name=" Designer Mail "content=" Maozhenzhi (at) gmail.com "/> <meta name=" Roots "content=" Jonmax.com "/> <meta name=" Keywords "content=" "/> <meta name=" Description "content=" "/> <title>& Lt;/title> <link rel= "shortcut icon" href= "Favicon.ico" type= "Image/x-icon" "/> <link rel=" stylesheet "rev=" Stylesheet "type=" Text/css "media=" print "href=" Jonstyle/css/print.css "/>" <link "rel=" stylesheet "rev=" Stylesheet "type=" text/css "media=" screen, projection "href=" jonstyle/css/master.css "/> <link" rel= "stylesheet" rev= "stylesheet" type= "text/css" media= "screen, projection" href="Jonstyle/css/master_color.css"/> <link rel= "alternate" type= "Application/rss+xml" title= "RSS" href= " Index.xml "/> <link rel=" Edituri "type=" Application/rsd+xml "title=" RSD "href="/rsd.xml "/> <link rel=" Start "href=" "title=" Home "/> <style type=" Text/css ">/*<! [Cdata[*/body {margin:0; padding:0 10px 0 10px; border:0; height:100%; Overflow:auto;} #menu {right:0; top:0; width:130px; position:fixed; padding:10px; text-align:center; font-weight:bold; background: #000 ;} * HTML #menu {position:absolute; right:16px;} /*only for ie*/html {overflow:auto!important overflow:hidden;}/*]]>*/</style></pead><!---->& Lt;body id= "" class= "><div id=" menu "><a href=" # "title=" Dummy menu item ">mozilla</a><a href=" # "title=" Dummy menu item ">opera</a><a href=" # "title=" Dummy menu item ">netscape</a><a href=" # Bites "title=" "Dummy menu item" >firefox</a><a href= "#" title= "Dummy menu item" >ie6</a><a href= "#" title= "Dummy menu item" >windows</a><a href= "#" title= "Dummy menu item" >style</ A><a href= "#" title= "Dummy menu item" >CSS</a></div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div&gtLook at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div&gtLook at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div&gtLook at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div> look at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div><div&gtLook at the top right corner of the content, no matter how the browser scrolling, it is always in that place! </div></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]