"CSS3"---position absolute absolute positioning and relative relative positioning

"Recently by absolute and relative confused, do not know how to use, online Find Articles summary summary, right and wrong welcome correct, also welcome you to join it Exchange Group: 123493055 We Exchange >>>>>"

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 page has been automatically adapted to the size of the resolution, and absolute will be the browser's upper-left corner of the original point, not because of the change in resolution of the location.

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. ）

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 original point of the current level is positioned according to the original point of the parent content area.

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 . The parent container uses relative positioning, and when the child element uses absolute positioning, 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

If you are relative to an element, first it will appear where it is located. It then moves the element "relative to" its original starting point by setting the vertical or horizontal position. (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

The content in CSS about positioning is: position:relative | Absolute | static | The fixed    static (static) does not have a special setting and follows the basic positioning rules and cannot be graded hierarchically by Z-index.    relative (relative positioning) objects cannot cascade, do not detach from the document flow, refer to their own static position through top,bottom,left,right positioning, and can be hierarchically graded by Z-index.    Absolute (absolute positioning) is removed from the document stream and positioned 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 fixed    position the reference pair is like a visual window rather than 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; Auto follows the positioning of its parent object; namber  the integer value without units. Can be a negative number

The following specific case description:

1. If c is nested in B, and the b,c are relative positioning, then the relative positioning of C is relative to B, B retains the placeholder information, and B retains the placeholder information of C.

2. If c is nested in B, B is absolutely positioned, C is relatively positioned, B is detached from the float, there is no placeholder information, and C is positioned relative to B, and a placeholder occurs in B.

3. If A,b,c,d is tied and nested in a DIV with ID group, and:

#group {potision:relative;height:200px;width:4oopx;} #b {potision:absolute;left:20px;top:20px;}
In this way, the parent element is relative positioning, but does not set the value of Left,top, it can be regarded as a floating object, and B is absolute positioning, and thus does not occupy a bit, but because the parent element is relative positioning, the absolute positioning here becomes relative to the parent element's absolute positioning, not relative to the browser.
For example:

<div id= "Main" >
<div id= "a" >aaaaaaaaaa</div>
<div id= "B" >bbbbbbbb</div>
</div>
(1) If you set the Position:absolute to a, it will get rid of the normal flow of the document, a will not occupy a bit, that is, B is no longer based on a, but directly from the parent to start positioning. (b position is the same as without a).

If you set position:relative for a, (not out of the document Stream) A will occupy, a is positioned relative to his original position, appears to be floating on main, and B will be arranged in the original way, not affected by a. (The position of B is the same as a without position attribute)
(2) If the Position:relative/absolute is set to main, then the absolute positioning or relative positioning of a or b inside is relative to the parent element main, followed by a relative or absolute method to locate
Note: If the parent element does not have a valid height value set, then B is the absolute position of the parent element relative to the upper-right corner of the last element in group to set the width-height!!!!!!

Reference:a sheep Blog» Positioning position Detailed: relative and absolutehttp://www.cnblogs.com/jenry/archive/2007/07/15/818660.html

"CSS3"---position absolute absolute positioning and relative relative positioning