Explanation on the CSS2.0 Handbook:
Setting this property value to absolute drags the object away from the normal document flow absolute positioning without regard to the layout of its surrounding content. If other objects with different Z-index properties already occupy the given position, they will not interact with each other, but will cascade in the same place. The object does not have an outer patch (margin), but there are still internal patches (padding) and borders (border).
To activate the absolute (absolute) positioning of an object, you must specify at least one of the left, right, top, bottom properties, and set this property value to absolute. Otherwise, these properties use their default value of auto, which causes the object to conform to the normal HTML layout rules and is rendered immediately after the previous object.
The Trbl property (top, right, BOTTOM, left) is only valid if the Position property is set.
When setting Position:absolute
If the parent (infinite) does not set the Position property, the current absolute combines the TRBL property to locate the original point in the upper-left corner of the browser
If the parent (infinity) Sets the Position property, the current absolute is positioned with the Trbl property as the original point in the upper-left corner of the parent (nearest).
When setting position:relative
The upper-left corner of the content area referencing the parent (nearest) is positioned with the TRBL attribute (or offset from the previous element in the parent content area) without a parent, which is the original point in the upper-left corner of the body. Relative positioning is not cascading. When using relative positioning, the element still occupies the same space, regardless of whether the element is moving. Therefore, moving an element causes it to overwrite other boxes.
Generally speaking, the center of the page with absolute error prone, because the Web 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, will not be the resolution of changes in the location. Sometimes you also need to rely on Z-index to set up the upper and lower relationship of the container, the larger the number of the top, the number of natural numbers. Of course there is a point to note that the parent-child relationship can not use Z-index to set up and down relationship, it must be the child in the upper parent.
Setting this property value to relative keeps the object in a normal HTML stream, but its position can be offset by its previous object. After a relative (relative) anchored object, the text or object occupies their own space and does not overwrite the natural space of the object being anchored. Unlike this, the text or object after an absolute (absolute) anchored object occupies its natural space before it is dragged away from the normal document stream. Placing an absolute (absolute) anchored object outside the viewable area causes the scroll bar to appear. The relative positioning object is outside the viewable area, and the scroll bar does not appear. In fact, the main problem for positioning is to remember the meaning of each location. Relative positioning is the initial position of the relative to element in the document flow, while absolute positioning is the nearest ancestor element relative to.
The following are supplementary:
Although have to know the absolute positioning of CSS (absolute), relative positioning (relative), but have never written their own related effects!
Busy half days, also be completed! Also make some of these two attributes understand!
summarized as follows:
Let's look at the following layer structure
<body>
<div id=posi>
<div id=rel> This layer only applies position:relative; Style </div>
<div id=abs> This layer only applies position:absolute; Style </div>
<div id=sss> does not apply styles <div>
</div>
</body>
1, Absolute: does not occupy, relative: Has occupies the position!
such as the upper structure:
The layer with ID rel will occupy one row when it is displayed! The ABS layer behind it will only show up on the next line!
The layer with the ABS ID will overlap with the back ID of SSS when it is displayed!
2, by default (not with top, etc. to locate), absolute (absolute positioning) with the parent layer to locate the
If the above ID for the ABS layer, if not with top, etc. to locate, then its display position with the parent posi layer (posi in the lower left corner of the document, it will also be in the lower left corner)
3, in the combination of top, bottom, right, left and other attributes, absolute (absolute positioning) to the window as positioning, relative to its own placeholder for the baseline to do offset! As follows:
<body>
<div id=posi>
<div id=sss> does not apply styles <div>
<div id=rel> this layer applies position:relative;bottom:30px; style </div>
<div id=abs> This layer only applies position:absolute;bottom:30px; Style </div>
</div>
</body>
Above code:
Layers with ID rel are moved up and overlap with the layer with ID SSS
The layer with the ABS ID is moved to a window of 30 pixels from the window.
4, in the combination of top, bottom, right, left and other attributes, if you want to absolute (absolute positioning) as the parent layer as the positioning of the baseline, then apply the absolute or relativ properties in the parent layer can! as follows:
<body>
<div id=posi style= "Position:relative" >
<div id=rel> this layer applies position:relative;bottom:30px; style </div>
<div id=abs> This layer only applies position:absolute;bottom:30px; Style </div>
</div>
</body>
Above code: the layer that ID is posi, also can use absolute attribute!
The layer with ID rel, unaffected by its own placeholder for the baseline to do offset!
ID for ABS layer is based on the posi layer of ID as the baseline, if the height of the posi layer is less than 30px, ABS layer may not be able to see Oh!
