Extension reading
* Interpreting Absolute and relative
* Position:relative/absolute can not break the level
* Supplement to the article "Unable to break through the ranks"
Positioning has always been a difficult point in the Web Standard application, if the position is not clear, then the effect may not be realized, the effect may be distorted. If the principle of positioning is cleared, the positioning will make the Web page more perfect.
definition of positioning:
The content in CSS about positioning is: position:relative | Absolute | static | Fixed
Static does not have special settings, follow the basic positioning rules, can not be graded by Z-index hierarchy.
Relative does not detach from the document flow, referencing its own static position through Top,bottom,left,right, and can be hierarchical by z-index.
Absolute out of the document stream, positioned through top,bottom,left,right. Selects its nearest parent anchor element, and when the parent position is static, the absolute element is positioned with the body coordinate origin and can be hierarchically graded by Z-index.
Fixed fix positioning, where he fixed the pair like a visual window rather than a body or a parent element. Hierarchical grading can be done through Z-index.
Cascading ratings for positioning in CSS: Z-index:auto | Namber;
Auto follows the positioning of its parent object
Namber integer value with no units. Can be a negative number
the principle of positioning:
Elements that can be shifted (relative positioning)
In this article flow, any element is constrained by the text flow of its own position, but through the CSS we still make these elements can change their position, we can float to let the elements floating, we can also use margin to let the element to create position movement. But in fact that is not the actual displacement, because, it is only by increasing the margin value to achieve the camouflage. And the real displacement is through the top,right,bottom,left (the TRBL,TRBL can be used for folding. ) is generated for a relatively positioned element. Let's look at the following figure:
Photo attachment: 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 View full image in new window \nctrl+ mouse wheel zoom in or zoom out ';} "border =0>
We look at the picture is a width of 200px, height of 50px,margin:25px; border:25px solid #333; padding:25px; The relative position of the element, and the displacement distance on the 50px, from the left 50px. Below is a black block with default positioning. We see that this chunk of text flow is partially blocked by the relative positioning above, which means: "When the elements are set relative or absolutely positioned, they will automatically cascade, their cascade level is naturally higher than the text flow." Unless you set its Z-index value to negative, it will not appear when z-index in a browser such as Firefox. And we find that when the relative positioning element is shifted, the content has been separated from the text flow, but also in the flow of the original relative positioning left the original total width and total height (content height or width plus margin\border\padding value). This shows that in relative positioning, although the display area is out of the original text stream, there is also an old nest in the text flow that is relatively positioned. Pay particular attention to this point, because in practical applications if the relative positioning of the displacement value is too large, then the original area will form a blank.
And we notice that the coordinate point of the anchor element is the top-left edge point of the margin value, which is the B point in the figure. The calculation of all displacements will then be driven by the element based on this point. 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 the speaker. An arrow with a displacement in the picture points to the identity, with the plus sign being the positive displacement direction, and the negative displacement direction with the minus sign. About the displacement direction, can extend the reading Yiwen "The discussion of the margin property (a)"
An element that can be in any position (absolute positioning)
As mentioned above: relative positioning can only be in the text flow in the position of the upper and lower left and right movement, there are certain limitations, although his performance area out of the text flow, but in the text stream still reserved a place for it, it is like a working person he went to the field, but there is still a special position in his hometown, This position does not change with his movement. But this obviously will empty a blank, if you want the text stream to discard this part will need to use absolute positioning. Absolute positioning is not only out of the text stream, but also in the text flow does not leave the absolute location of the element reserved. It's like a job in a factory, and if one of the workers is gone, there will be other workers to fill the position. And the part that moves out naturally becomes the free body. Absolute positioning will allow the element to be set in any position by TRBL. When the parent layer position property is the default value, the coordinate origin of the TRBL starts with the body's coordinate origin. See:
Photo attachment: 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 View full image in new window \nctrl+ mouse wheel zoom in or zoom out ';} "border =0>
It can be seen that the content in the text stream will be replaced by the absolute location of the no-element position, not at all polite. 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 page, as there is their absolute location after the origin of the coordinates.
Absolute location associated with
It says a single absolute location, and in practical applications we often need a special form. That is, you want the positioning element to have an absolute positioning of the characteristics, but also want the absolute positioning of the coordinates of the origin can be fixed to a point in the Web page, when the point is moved, the absolute position of the element can guarantee relative to the original coordinate position. In other words, this absolute positioning needs to be moved with the Web page, and is determined by a fixed location on the page. This effect is especially important when the Web page is centered. The basic way to achieve this is to set the parent of this absolute location to relative positioning or absolute positioning. Then the coordinates of the absolute positioning will start with the parent as the coordinate starting point.
Although this is true, this coordinate origin is not the parent's coordinate origin, which is a very strange coordinate position. Let's look at the Model diagram:
Photo attachment: Relative positioning vs. absolute positioning. 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 View full image in new window \nctrl+ mouse wheel zoom in or zoom out ';} "border =0>
As we can see, the parent in this diagram is the black-gray block, and the child is the cyan block. The parent is relative positioning, and the child is absolutely positioned. The child has a top displacement of 50 pixels and a left-leaning shift of 50 pixels. So we see that the child's coordinate origin is not offset from the parent's coordinate origin by 50 pixels, but rather from the top left edge of the parent block's padding point as the starting point of the coordinate (that is, point a). And the parent is here if you want to create a position move, or if the browser window size changes, it will not affect the location of the absolute positioning element and the relative positioning of the parent element of the relationship between. The child does not have to adjust the value.
This is a very special and very practical way of application. If you are not comfortable with the positioning control, I believe that the interpretation of the positioning here can be used to locate the use of arbitrary.
Elements that are always in sight (fixed positioning)
As a result of the misuse of advertising, some browser software has started to have advertising content interception, making some good results are not recommended to use now. Let an element, for example, keep changing its position as the page scrolls. And now I can use a CSS in a positioning property to achieve such an effect, the element attribute is once not supported position:fixed; His meaning is: fixed positioning. This fixation is similar to absolute positioning, except that the absolute positioning is fixed to a certain location in the Web page, and the fixed position is fixed in the browser's view frame position.
Although the original browser does not support a property, but the development of the browser so that the current high-level browser can correctly parse the CSS properties. and through the CSS hack so that IE6 can achieve this effect (currently cannot make ie5.x) to achieve this effect. In order not to turn this article into a lengthy theory, this example is just the end of the story. Some questions about this example can be analyzed on your own. 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= "> Mozillaoperanetscapefirefoxie6windowsstylecss</p><p> look at the top right corner of the content, no matter how the browser scroll, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the contents of the top right, no matter how the browser scrolls, it's always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the contents of the top right corner, no matter how the browser scrolls,It's always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! Look at the top right corner of the content, no matter how the browser scrolls, it is always in that place! </P><P></body></P><P></ptml></P>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
