Analysis of position: relative position: absolute

Positioning has always been a difficult point in WEB standard applications. If you cannot clearly identify it, the effects that should be achieved may not be achieved, and the effects may be different. If the positioning principle is clarified, the positioning will make the web page more perfect.

Definition of positioning:

The positioning content in CSS is:

Position: relative | absolute | static | fixed

Static)There are no special settings. The basic positioning rules are followed, and hierarchical classification cannot be performed through z-index.

Relative)Objects cannot be stacked and are not separated from the document stream. The objects are located by top, bottom, left, and right based on their static locations, and can be graded by z-index.

Absolute (absolute positioning)Remove the Document Stream and locate it through top, bottom, left, right. Select the most recent parent-level object with the positioning settings for absolute positioning. If the parent-level object does not set the positioning attribute, the absolute element will be located at the origin of the body coordinate, you can perform hierarchical classification using z-index.

Fixed (fixed positioning)The fixed reference objectVisual WindowIt is not a body or a parent element. You can perform hierarchical classification using z-index.

Note:
Cascade levels positioned in CSS:Z-index: auto | namber;

AutoFollow the positioning of its parent object
NamberAn integer with no unit. Negative

1. Relatively Positioning relative

Relative positioning is a very easy-to-understand concept. If an element is relatively located, it appears at its location. Then, you can set the vertical or horizontal position to move the element "relative to" its start point. If you set top to 20 pixels, the box will show 20 pixels at the top of the original position. If left is set to 20 pixels, a 20 pixel space is created on the left of the element, that is, the element is moved to the right (see Figure 2-10 ).

# Mybox {
Position relative;
Left: 20px;
Top: 20px;

}

Figure 2-10 relative positioning of Elements

When relative positioning is used, elements still occupy the original space no matter whether they are moved or not. Therefore, moving an element overwrites other boxes.

When the Position attribute value is Relative
The original position occupied by the object is retained, and the object following it remains the original position based on the original document stream
The Top value indicates the distance from the object to the original position offset.
The bottom value indicates the distance from the object to the original position.
When both exist, only Top works.
The left value indicates the distance between the object and its original position to the right.
The value of right indicates the distance from the object to the left offset from the original position.
When both exist, only left takes effect.

If the target object hasWhen padding, border, and margin are used, the starting point of the position is not affected. Or the location of the original object.

2. Absolutely set absolute

Relative positioning is actually considered as part of the normal stream positioning model, because the position of an element is relative to its position in the normal stream. In contrast, absolute positioning makes the element's position irrelevant to the Document Stream, so it does not occupy space. The layout of other elements in a normal Document Stream is the same as that of an absolutely positioned element (see Figure 2-11 ).

Figure 2-11 absolute positioning of Elements

The position of the absolute positioning element is relative to the nearest located ancestor element. If an element does not have an ancestor element that has been located, its position is relative to the initial contained block. Depending on the user agent, the initial inclusion block may be a canvas or HTML element.

As with the relative positioning box, the absolute positioning box can be moved from its contained block up, down, left, right. This provides great flexibility. The element can be directly located anywhere on the page.

The main problem in positioning is to remember the meaning of each positioning. Relative positioning is the initial position of "relative" elements in the Document Stream, while absolute positioning is the "relative" Recent "already located ancestor element. If no already located ancestor element exists, it is the initial inclusion block.

Because the absolute positioning boxes are irrelevant to the Document Stream, they can overwrite other elements on the page. You can set the z-index attribute to control the stacking order of these boxes. The higher the z-index value, the higher the position of the box in the heap.

When the Position attribute value is absolute
The object is extracted from the document stream, and the original position is replaced by the following object.
The Top value indicates the distance between the upper border of the object and the Top of the browser window.
The bottom value indicates the distance between the bottom border of the object and the bottom of the browser window.
When both exist, only Top works. If neither is specified, the Top is the same as the original document stream position, that is, the vertical position remains unchanged.
The left value indicates the distance between the left border of the object and the left border of the browser window.
The right value indicates the distance between the right Border of the object and the right side of the browser window.
When both of them exist, only left takes effect. If neither of them is specified, the left side is the same as the original document stream position, that is, the horizontal position remains unchanged.
When the Position attribute value is absolute, if there is a first-level parent object (whether it is a parent object or a grandfather object, or a later generation, the same), the Position attribute value is Relative, the above-mentioned relative browser window positioning will become relative parent object positioning, which is helpful for precise positioning.

Absolute location of Association

The above is a single absolute positioning, and we often need a special form in practical applications. That is to say, the positioning element must have the absolute positioning feature, but the absolute positioning coordinate origin can be fixed at a certain point on the webpage, when this point is moved, the absolute bitwise element can ensure the relative position relative to the original coordinate. That is to say, this absolute positioning is required to move along with the webpage, and it is determined by a fixed position on the webpage. This effect is particularly important when the webpage is centered. The basic way to achieve this effect is to set the parent level for this absolute positioningRelative positioningOrAbsolute positioning (if Left and Top attributes are not set for absolute positioning, they can be fixed at the Position where Position should be not set). Then, the absolute positioning coordinates start with the parent level.

Even so, the coordinate origin is not the coordinate origin of the parent level, which is a very strange coordinate position. Let's take a look at the model diagram:

We can see that in this figure, the parent level is a black-gray block, and the child level is a blue block. Parent level is relative positioning, and child level is absolute positioning. The sub-level is set to 50 pixels at the top and 50 pixels at the left tilt. Then, we can see that the sub-level coordinate origin does not shift 50 pixels from the parent-level coordinate origin, but is from the top left edge of the border of the parent-level block as the coordinate origin (that is, A point ). The parent level does not affect the location relationship between the absolute positioning element and the parent level relative positioning element if location movement or browser window size changes. This sublevel does not need to be adjusted.

This is a very special and practical application method. If you are not comfortable with positioning, I believe that after reading the explanations here, you will certainly be able to use positioning as you like.

Relatively positioned references:

<Div ----------- position: relative; the last ancestor positioning element, reference object
<Div ---------- not set as a positioning element, not a reference object
<Div -------- not set as a positioning element, not a reference object
<Div box1
<Div box2 --- position: absolute; top: 50px; left: 120px;
<Div box3

:

Situation where the latest ancestor positioning element is used as a reference object

In Figure 6, Box2 is set to an absolute positioning element, out of the Document Stream, the Document Stream is changed from box1-box2-box3 to box1-box3, and box2 is referenced by the nearest positioning ancestor (blue frame.
Hierarchical relationship:
<Div ----------- position: relative; not the latest ancestor positioning element, not a reference object
<Div ---------- not set as a positioning element, not a reference object
<Div -------- position: relative reference object
<Div box1
<Div box2 --- position: absolute; top: 50px; left: 120px;
<Div box3
: