Absolute: absolute positioning;
Relative: relative positioning;
Alas, I was only known to know the Chinese meaning of these two words, and then,,, how to use ... is also to touch the ambiguous use. Finally took the time to look at:
1. Absolute positioning: Absulute
Absolute----Position:absolute: absolute Positioning , the location will be based on the top left corner of the browser to calculate, with top, right, BOTTOM, left to locate, in the absence of a set of TRBL, By default, the original point is the origin point of the parent's marker. 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. Absolute positioning keeps elements out of the document flow and therefore does not occupy space. The layout of elements in a normal document flow is as if an absolutely positioned element does not exist. (Because the absolutely-positioned boxes are independent of the document flow, they can overwrite other elements on the page and can control its hierarchical order by Z-index.) The higher the value of the Z-index, the more it displays on the upper level. ）
Absolute positioning: ablution out of the document flow and floating model, exists independently of other objects, and does not occupy a position. The parent container uses relative positioning, and when the child element is absolutely positioned, the position of the element is no longer relative to the upper-left corner of the browser, but relative to the upper-left corner of the parent window.
2. Relative positioning: Relative
position:relative; What he means is relative positioning , which refers to the original point of the parent as the original point, and no parent to the original point of the body as the original point, with the TRBL for positioning, when the parent has padding and other CSS properties, the current level of the original point is referenced to the parent content area of the original point to locate. (again, relative positioning, regardless of whether or not to move, the element still occupies the original space.) Therefore, moving an element causes it to overwrite other boxes)
Relative positioning: Relative is not out of normal document flow, is positioned relative to its original position, and its original placeholder information still exists.
OK, there are several other properties about position:position:relative | absolute | static | fixed
static (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 like
Visual WindowNot a body or a parent element. Hierarchical grading can be done through Z-index.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 absolute and relative detailed
