Setting this property value to absolute will drag the object out of the normal document flow absolute positioning, regardless of the layout of the content around it. If other objects with different z-index properties already occupy a given position, they will not affect each other, but will overlap in the same position. The object does not have an outer patch (margin), but still has an inner patch (patding) and a border (border).
To activate an object's absolute positioning, you must specify at least one of the left, right, top, bottom attributes and set this attribute value to absolute. Otherwise the above attributes will use their default value auto, which will cause the object to follow the normal HTML layout rules and be rendered immediately after the previous object.
TRBL attributes (TOP, RIGHT, BOTTOM, LEFT) are valid only if the position attribute is set.
You should set position:absolute
If the parent (infinite) does not set the position attribute, then the current absolute is positioned in combination with the TRBL attribute at the upper left corner of the browser as the original point
If the parent (infinite) sets the position property, then the current absolute is positioned in combination with the TRBL property to the upper left corner of the parent (recent) as the original point.
When setting position: relative
The upper left corner of the parent (recent) content area is the original point combined with the TRBL attribute (or offset relative to the previous element of the positioned element in the parent content area), and the upper left corner of the BODY is the original point without the parent. Relative positioning cannot be layered. When using relative positioning, the element still occupies its original space regardless of whether it is moved or not. Therefore, moving an element causes it to overwrite other boxes.
Generally speaking, if the web page is centered, it is easy to make mistakes when using Absolute, because the web page has always adapted automatically with the size of the resolution, while Absolute will use the upper left corner of the browser as the original point and will not change the position due to the change in resolution. Sometimes it is also necessary to rely on z-index to set the relationship between the upper and lower of the container, the larger the value, the higher the top, and the numerical range is a natural number. Of course, one thing to note is that the parent-child relationship cannot be set with z-index, and the child level must be above and below the parent.
Setting this property value to relative keeps the object in normal HTML flow, but its position can be offset based on its previous object. Text or objects that follow a relative locator occupy their own space without covering the natural space of the object being positioned. In contrast, the text or object after the absolute positioning object occupies its natural space before the targeted object is dragged away from the normal document flow. Placing an absolute positioning object outside the viewport causes a scrollbar to appear. Placing a relative positioning object outside the viewing area does not appear with a scrollbar. In fact, the main problem with positioning is to remember the meaning of each positioning. Relative positioning is the initial position of the element "relative to" the document flow, while absolute positioning is the ancestor element that has been positioned "relative to" the most recent one.
Here are the additions:
Although I know the absolute positioning (absolute) and relative positioning of CSS, I have never written the relevant effects by myself!
After working for more than half a day, it can be considered complete! I also figured out some of these two attributes!
The summary is as follows:
Let's take a look at the following layer structure first
<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 <div>styles
</div>
</body>
1. absolute: does not occupy a seat, relative: has a place!
Such as superstructure:
Layers with id rel will occupy one line when displayed! The ABS layer behind it will only show up on the next line!
When the layer with the id ABS is displayed, it will overlap with the ID of SSS behind!
2. By default (not positioned in combination with top, etc.), absolute (absolute positioning) is positioned by the parent layer
For example, if the above layer with ID is ABS, if it is not positioned in combination with TOP, its display position will be with the parent POSI layer (POSI is in the lower left corner of the document, and it will also be in the lower left corner)
3. When combining top, bottom, right, left and other attributes, absolute (absolute positioning) is positioned with the window as the positioning, and relative is offset with its own occupancy as the baseline! As follows:
<body>
<div id=posi>
<div id=sss> does not apply <div>styles
<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 with the id rel moves up and overlaps the layer with the id SSS
The layer with ID ABS will be moved to a position 30 pixels away from the window with the window as the baseline!
4. When combining top, bottom, right, left and other attributes, if you want absolute (absolute positioning) to use the parent layer as the positioning baseline, you can apply absolute or relativ attributes on the parent layer! 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>
The above code: id is the layer of posi, you can also use the absolute attribute!
id is the layer of rel, which is not affected, and is offset by its own placeholder as the baseline!
The layer with id as ABS is based on the bottom edge of the POSI layer as the positioning baseline, if the height of the POSI layer is less than 30px at this time, the ABS layer may not be able to see it!
|
Posted on 10/30/2014 2:39:28 PM
|
|
|
