Extension reading
* Interpreting Absolute and relative
* Position:relative/absolute can't break the Grade
* A supplement to the article "the level that cannot break"
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:
Photo accessories: Positioning. PNG (2007-4-1 07:14, 33.12 K)
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click on the new window to view the full picture \nctrl+ mouse wheel zoom in or out ';} ' border =0>
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 margin\border\padding 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.
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. This can be pushed, when the TRBL is negative, the direction of displacement is out. In the picture, the arrow pointing to the mark, with the plus sign is the positive displacement direction, with the minus sign is the negative displacement direction. 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 does not change as he moves. But it's clear that there is a blank space, and if you want the text stream to discard this part, you need to use absolute positioning. Absolute positioning is not only separated from the text stream, but also does not leave an exclusive vacancy in the text stream for the absolute positioning element. This is like a job in a factory, and 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 allow elements to be set 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:
Photo Accessories: Positioning 2,absolute.png (2007-4-1 07:14, 31.53 K)
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click on the new window to view the full picture \nctrl+ mouse wheel zoom in or out ';} ' border =0>
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 a single 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 can guarantee relative to the original coordinate 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 absolute positioning of the parent to relative positioning or absolute 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:
Photo accessories: Relative positioning and absolute positioning of the relationship. PNG (2007-4-1 07:14, 34.02 K)
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7 this.alt= ' Click on the new window to view the full picture \nctrl+ mouse wheel zoom in or out ';} ' border =0>
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 (that is, point a).---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 abuse of advertising, so that some browser software began to have the advertising content interception, so that some good results are not recommended 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 turn this article into a lengthy one, this is the end of the story. Some questions about this example can be analyzed by ourselves. There is no understanding of the place can give me a message!
<p><! 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" ></P> <P><pead> <meta http-equiv= "Content-type" Content= "text/html; 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 ;} </P> <p>* html #menu {position:absolute; right:16px} /*only for ie*/html {overflow:auto!important; overflow:hidden;} </P> <P>/*]]>*/</style> </pead> <!----> <body id= "class=" "> <div id=" menu "> Mozilla Opera Netscape Firefox IE6 Windows Style CSS </div></P> <P><div> look at the top right-hand corner, no matter how the browser scrolls, It's 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>;d iv> 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> look at the top right corner of the content, no matter how the browser scrolling, it is always thereA 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> look at the top rightCorner 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> 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></P> <P></body></P> <P></ptml></P>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
