Home > Developer > Web Develop
The explanation on the CSS2.0 Handbook is:
Setting this property value to absolute will drag the object out of the normal document flow to absolute positioning without regard to the layout of the content around it. If other objects with different Z-index properties already occupy a given position, they will not interact with each other and will cascade at the same location. The object does not have an outer patch (margin), but it still has an inner patch (padding) and border (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, the above properties will use their default auto, which will cause the object to follow normal HTML layout rules and be presented immediately after the previous object.
The Trbl property (TOP, right, BOTTOM, left) is valid only if the Position property is set.
When setting Position:absolute
If the parent (infinity) does not set the Position property, the current absolute is combined with 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 combined with the TRBL property to locate the original point in the upper-left corner of the parent (most recent).
When setting position:relative
The upper-left corner of the content area referring to the parent (most recent) is positioned with the original point combined with the TRBL property (or offset from the previous element in the parent content area of the positioned element), without the parent being the original point in the upper-left corner of the body. Relative positioning is not stacked. When using relative positioning, elements still occupy the original space regardless of whether the element is moving or not. Therefore, moving an element causes it to overwrite other boxes.
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. Sometimes it is necessary to rely on the z-index to set the container's upper and lower relations, 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.
Setting this property value to relative keeps the object in a normal HTML stream, but its position can be offset by its previous object. Text or objects after the relative (relative) anchor object occupy their own space without overwriting the natural space of the object being anchored. Unlike this, text or an object after an absolute (absolute) anchored object occupies its natural space before the anchored object is dragged off the normal document stream. Placing an absolute (absolute) anchored object outside the viewable area causes the scroll bar to appear. The scroll bar does not appear when you place a relative (relative) anchored object outside the viewable area. In fact, the main problem for positioning is to remember the meaning of each location. Relative positioning is relative to the initial position of the element in the document flow, and absolute positioning is the closest positioned ancestor element relative to.
summarized as follows:
Let's look at this one layer structure
<body>
<div id=posi>
<div id=rel> This layer applies only position:relative; style </div>
<div id=abs> This layer applies only position:absolute; style </div>
<div id=sss> do not apply styles <div>
</div>
</body>
1, Absolute: non-occupying, relative: there is a placeholder!
such as the upper structure:
A layer with a rel ID will occupy one line when it is displayed! The ABS layer behind it will only show up on the next line!
The layer with the ID ABS is displayed with an overlay with the following ID, SSS!
2, by default (not combined with top etc to locate), absolute (absolute positioning) to the parent layer to locate
If the above ID is ABS layer, if not combined with top and so on to locate, then its display position will be 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 the location, relative with its own placeholder for the baseline to do the offset! As follows:
<body>
<div id=posi>
<div id=sss> do not apply styles <div>
<div id=rel> this layer applies position:relative;bottom:30px; style </div>
<div id=abs> This layer applies only position:absolute;bottom:30px; style </div>
</div>
</body>
The above code:
Layers with the ID rel are moved up and overlap with the layer with the ID of SSS
The layer with the ABS ID will be moved to the window at 30 pixels from the base.
4, in the combination of top, bottom, right, left and other attributes, if you want to absolute (absolute positioning) can be the parent layer as the positioning baseline, then apply the absolute or relativ property on the parent layer can be! 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 applies only position:absolute;bottom:30px; style </div>
</div>
</body>
The above code: The ID is posi layer, can also use the Absolute property!
The layer with the ID rel is unaffected and offsets the baseline with its own placeholder!
Note: The ID of the ABS layer is based on the ID posi layer of the bottom as the positioning baseline, if the height of the posi layer is less than 30px, the ABS layer may not be able to see.
Position::absolute and position:relative in CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
