Home > Developer > JavaScript
Css position: absolute, relative, absoluterelative
Explanation on CSS2.0 HandBook:
Setting this attribute value to absolute will drag the object out of the normal Document Stream and definitely locate it without considering the layout of its surrounding content. If other objects with different z-index attributes occupy a given position, they will not affect each other, but will stack at the same position. At this time, the object does not have an external patch (margin), but it still has an internal patch (padding) and a border (border ).
To activate the absolute (absolute) Positioning of an object, you must specify at least one of the left, right, top, and bottom attributes and set this attribute value to absolute. Otherwise, the property will use their default value auto, which will cause the object to follow the normal HTML layout rules and be presented immediately after the previous object.
The TRBL attribute (TOP, RIGHT, BOTTOM, LEFT) is valid only when the position attribute is set.
When position: absolute is set
If the position attribute is not set for the parent level (unlimited), the current absolute uses the TRBL attribute to locate the original point in the upper left corner of the browser.
If the position attribute is set for the parent level (unlimited), the current absolute is located based on the TRBL attribute in the upper left corner of the parent level (nearest) as the original vertex.
When position: relative is set
Then, the original vertex is located based on the TRBL attribute in the upper left corner of the parent (recent) content area (or offset relative to the last element of the located element in the parent content area ), if there is no parent level, the original vertex is in the upper left corner of the BODY. Relative positioning cannot be stacked. When relative positioning is used, elements still occupy the original space regardless of whether the elements are moved or not. Therefore, moving an element overwrites other boxes.
In general, when the webpage is centered, Absolute is prone to errors, because the webpage always adapts automatically with the resolution, while Absolute uses the browser's upper left corner as the original point, the location will not change due to resolution changes. Sometimes you also need to use z-index to set the upper and lower relations of the container. The larger the value is, the higher the upper it is. The value range is a natural number. Of course, it should be noted that the parent-child relationship cannot be set with z-index. The parent-child relationship must be set at the parent level.
Setting this property value to relative will keep the object in a normal HTML stream, but its position can be offset based on its previous object. The text or objects after the relative (relative) positioning objects occupy their own space and do not overwrite the natural space of the objects to be located. In contrast, the text or object after an absolute (absolute) Positioning object occupies its natural space before it is dragged away from the normal document stream. Placing an absolute (absolute) Positioning object outside the visible area will cause the scroll bar to appear. The scroll bar does not appear when the relative (relative) Positioning object is placed outside the visible area. In fact, the main problem of positioning is to remember the significance of each positioning. Relative positioning is "relative to" the initial position of the element in the document stream, and absolute positioning is "relative to" the most recently located ancestor element.
The following is a supplement:
Although I know the absolute position (absolute) and relative positioning (relative) of css, I have never done it myself!
I have been busy for a long time, and I have finished it! I also figured out some of these two attributes!
Summary:
First 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> do not apply a style <div>
</Div>
</Body>
1. absolute: No placeholder, relative: placeholder!
For example, the upper layer structure:
When a layer with the id of rel is displayed, a row is occupied! The abs layer behind it will only be displayed in the next line!
When the layer with id abs is displayed, it overlaps with the layer with id sss!
2. By default (excluding top and so on), absolute (absolute positioning) locates at the parent layer.
The above id is the abs layer. If the top layer is not used together, the position displayed will be the same as the parent-level posi layer (posi is in the lower left corner of the document, and it will also be in the lower left corner of the document)
3. When combined with top, bottom, right, left and other attributes, absolute (absolute positioning) uses the window as the positioning, and relative uses its own placeholder as the baseline for offset! As follows:
<Body>
<Div id = posi>
<Div id = sss> do not apply a style <div>
<Div id = rel> application position: relative; bottom: 30px; style </div>
<Div id = abs> This layer only applies position: absolute; bottom: 30px; style </div>
</Div>
</Body>
The above code:
Layers whose id is rel are moved up and overlapped with the layer whose id is sss
The layer with the id of abs will be based on the window and move to the position 30 pixels away from the window!
4. When combining top, bottom, right, left, and other attributes, If you want absolute (absolute positioning) to use the parent layer as the baseline for locating, you can apply the absolute or relativ attribute to the parent layer! As follows:
<Body>
<Div id = posi style = "position: relative">
<Div id = rel> application position: relative; bottom: 30px; style </div>
<Div id = abs> This layer only applies position: absolute; bottom: 30px; style </div>
</Div>
</Body>
The above code: the layer whose id is posi can also use the absolute attribute!
The layer with the id of rel is not affected. The layer is offset based on its own placeholder!
The layer with id as abs uses the bottom edge of the posi layer as the positioning baseline. If the height of the posi layer is smaller than 30px, the abs layer may not be able to see it!
Position: absolute. This is absolute positioning;
Is relative to the browser positioning.
For example, position: absolute; left: 20px; top: 80px; the container is always located at the position 20px left of the browser and 80 PX away from the browser.
Position: relative is relative positioning, which is relative to the previous container positioning. In this case, the top left cannot be used for positioning. Margin should be used.
For example: <div class = "1"> </div> <div class = "2"> </div>
When 1 is fixed. 1 style float: left; width: 100px; height: 800px;
The Style 2 is float: left; position: relative; margin-left: 20px; width: 50px;
2 is located at the right of 1, PX away
Css positioning: position: relative and absolute
If the parent element is positioned as position: absolute and the child element is positioned as position: absolute, remember to write the coordinates, then the position of the child element is also very different from that of the parent element, for example, if the parent element is position: relative, it is relative to the page, and it is placeholder. The full positioning will affect the next module, for example, a page with a width of PX, there are two element a, element A, 200 in width, 100 in height, Element B 200 in width, and 100 in height. They are in a row. However, I asked element A to locate the middle position, for example, position: relative; top: 0; left: 120px; then Element B will wrap the line, because it cannot be placed, so it will automatically switch to another line, but postion: absolute; will not occupy space, if you use position: absolute; for element A, B will start to typeset from the edge of the page and regard element A as nothing. As for the two questions you asked, first, you need to understand what relative and absolute mean. One is relative positioning, the other is absolute positioning, and the sub-element is also based on the parent element, no matter what the parent element is, the child element is located according to the starting position of the parent element.
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
