Position properties Absolute and relative detailed

To: Http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html has been studying JavaScript scripts recently, familiar with the various positioning properties of CSS styles in DOM, Before this attribute is not very understanding, from the Internet to find two articles feel very thorough, collection down, lest forget.

I. Interpreting absolute and relative http://www.blueidea.com/tech/web/2006/4249.asp

Many friends asked me absolute and relative how to distinguish, how to use? We all know that absolute is absolute positioning, relative is relative positioning, but what does this absolute and relative mean? Absolutely where is absolute, relative is relative to what place is it? What kind of characteristics do they have, and what kind of effect can they make? What kind of skills are there between the two? Let's take a one by one reading.

Absolute,css in the wording is: position:absolute; He means absolute positioning, he is referring to the top left corner of the browser, with the top, right, BOTTOM, Ieft (hereinafter referred to as TRBL) for positioning, in the absence of TRBL, by default, the original point of the parent is the original point. If you set TRBL and the parent does not set the Position property, the current absolute is positioned as the original point in the upper left corner of the browser, and the position is determined by TRBL.

Generally speaking, the center of the page with absolute is prone to error, because the Web page has been automatically adapted to the size of the resolution, and absolute will be the browser's upper left corner as the original point, not to change the resolution of the location. Many people make mistakes because they make mistakes. and the Web page left its characteristic and relative very similar, but still has the essential difference.

Relative,css in the wording is: position:relative; He means absolute relative positioning, he is referring to the original point of the parent is the original point, no parent is the original point of the body as the original point, with TRBL to locate, when the parent has padding and other CSS properties, the current level of the original point of the parent content area to refer to the original point to locate.

Sometimes we also need to rely on Z-index to set the upper and lower relationship of the container, the larger the value is on the top, the value range is the natural number. Of course, there is a point to note that the parent-child relationship is unable to use Z-index to set up the upper and lower relations, must be the child in the upper parent.

Two-detail positioning and positioning application Http://blog.sina.com.cn/u/4bcf4a5e010008o0

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 | fixedstatic (statically)No special settings, follow the basic positioning rules, can not be graded by Z-index hierarchy. relative (relative positioning)Objects cannot cascade, do not detach from the document flow, refer to their own static position through the Top,bottom,left,right location, and can be hierarchically graded by Z-index. Absolute (absolute positioning)Move away from the document stream and navigate through top,bottom,left,right. Selects its most recent parent object with the most positioned setting for absolute positioning, if the object's parent does not have a positioning property set, the absolute element is positioned with the body coordinate origin and can be hierarchically graded by Z-index. fixed (stationary positioning)The fixed reference pairs here are likeVisual WindowNot a body or a parent element. Hierarchical grading can be done through Z-index. Note： Cascading ratings for positioning in CSS:Z-index:auto | namber; AutoFollow the positioning of its parent object NamberInteger value with no units. Can be a negative numberthe principle of positioning: 1. 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, but also through the margin to let the element to create the position movement. But in fact that is not true 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: We're looking at a relatively positioned element in the picture.#first { width:200px; height:50px; margin:25px; border:25px solid #333; padding:25px; position:relative; top:50px; left:50px; }And below is a black block with default positioning.#second {width:400px;height:75px;margin:0;border:0;padding:0;backgroud-color: #333;}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. 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. 2. Elements 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. Look: The content in the text stream will be replaced by the absolute location of the element, no one is 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. 3. The associated absolute positioning 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: 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. 4. Elements that are always in sight (fixed positioning) 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.

Position properties Absolute and relative detailed