Parsing of CSS position absolute and relative [go]

Positioning has always been a difficult point in the Web Standard application, if the position is not clear, then the effect may not be realized, the effect may be distorted. If the principle of positioning is cleared, the positioning will make the Web page more perfect.

Definition of positioning:

The content in CSS about positioning is:

position:relative | Absolute | static | Fixed

Static does not have a special setting and follows the basic positioning rules and cannot be graded hierarchically by Z-index.

relative (relative positioning) objects cannot cascade, do not detach from the document flow, refer to their own static position through top,bottom,left,right positioning, and can be hierarchically graded by Z-index.

Absolute (absolute positioning) is removed from the document stream and positioned through top,bottom,left,right. Selects its most recent parent object with the most positioned setting for absolute positioning, if the object's parent does not have a positioning property set, the absolute element is positioned with the body coordinate origin and can be hierarchically graded by Z-index.

Fixed fixed position The reference pair is like a visual window rather than a body or a parent element. Hierarchical grading can be done through Z-index.

Note :
Cascading ratings for positioning in CSS:z-index:auto | namber;

Auto follows the positioning of its parent object
namber integer value with no units. Can be a negative number

1. Relative positioning relative

Relative positioning is a very easy-to-grasp concept. If a element is positioned relative to it, it will appear where it is located. You can then move the element "relative to" its starting point by setting a vertical or horizontal position. If you set top to 20 pixels, the box will appear 20 pixels below the top of the original position. If left is set to 20 pixels, a space of 20 pixels is created on the right side of the element, that is, the element is moved (see Figure 2-10).

#mybox {
Position relative;
left:20px;
top:20px;

}

Figure 2-10 relative positioning of elements

When using relative positioning, the element still occupies the original space, regardless of whether it is moved or not. Therefore, moving an element causes it to overwrite other boxes.

When the Position property value is relative
The position that the object originally occupies is retained, and the object behind it remains in its original position as the original document flow
The value of top indicates how far the object is offset from its original position
The value of bottom indicates the distance the object is offset upward from the original position
When both exist, only top works.
The left value indicates the distance from the object to the right offset from the original position
The value of right indicates the distance the object is offset to the left relative to the original position
When both exist, only left works.

If the relatively positioned objects have padding and border and margin, the starting point of the positioning is not affected. Or the position of the original object.

2. Absolute set Absolute

Relative positioning is actually considered part of the normal flow positioning model, because the position of the element is relative to its position in the normal stream. In contrast, absolute positioning makes the position of an element independent of the document flow and therefore does not occupy space. The layout of other elements in the normal document flow is as if the absolutely positioned element does not exist (see figure 2-11).

Figure 2-11 Absolute positioning of elements

The position of an absolutely positioned element is relative to the nearest positioned ancestor element. If an element does not have an ancestor element that has been positioned, its position is relative to the original containing block. Depending on the user agent, the original containing block might be a canvas or HTML element.

As with a relatively positioned box, an absolutely positioned box can be moved up, down, left, and right from its containing block. This provides a lot of flexibility. You can position the element directly anywhere on the page.

The main problem with positioning is to remember the meaning of each location. Relative positioning is the initial position of the relative to element in the document flow, and absolute positioning is the closest positioned ancestor element relative to, or the original containing block if there are no positioned ancestor elements.

Because absolutely positioned boxes are independent of the document flow, they can overwrite other elements on the page. You can control the stacking order of these boxes by setting the Z-index property. The higher the Z-index value, the higher the box's position in the heap.

When the Position property value is absolute
Objects are extracted from the document stream, and the original positions are replaced by the objects behind them.
The value of top indicates the distance from the top of the browser window to the upper border of the object
The value of bottom indicates the distance between the bottom border of the object and the base of the browser window
When both are present, only top works, and if neither is specified, the top of the file will be the same as the original document flow position, i.e. the position of the vertical remains unchanged.
The left value indicates the distance from the left border of the object to the browser window.
The value of right indicates the distance from the right border of the object to the left side of the browser window
When both are present, only left is active, and if neither is specified, then it is the same as the original document flow position, that is, the horizontal position remains the same.
When the Position property value is absolute, the relative browser window positioning will become relative to the parent object if there is a first-level parent object (either a parent object or a grandparent object, or a higher generational, as the Position property value is relative). This is useful for precise positioning.

Absolute location associated with

It says a single absolute location, and in practical applications we often need a special form. That is, you want the positioning element to have an absolute positioning of the characteristics, but also want the absolute positioning of the coordinates of the origin can be fixed to a point in the Web page, when the point is moved, the absolute position of the element can guarantee relative to the original coordinate position. In other words, this absolute positioning needs to be moved with the Web page, and is determined by a fixed location on the page. This effect is especially important when the Web page is centered. The basic way to achieve this effect is to set the absolute location of the parent to relative positioning or absolute positioning (left,top, such as absolute positioning when the property does not set a value, it can be fixed in the position where the position should not be set). Then the coordinates of the absolute positioning will start with the parent as the coordinate starting point.

Although this is true, this coordinate origin is not the parent's coordinate origin, which is a very strange coordinate position. Let's look at the Model diagram:

As we can see, the parent in this diagram is the black-gray block, and the child is the cyan block. The parent is relative positioning, and the child is absolutely positioned. The child has a top displacement of 50 pixels and a left-leaning shift of 50 pixels. So we see that the child's coordinate origin is not offset from the parent's coordinate origin by 50 pixels, but rather from the top left edge of the parent block's border point as the starting point of the coordinate (that is, point a). And the parent is here if you want to create a position move, or if the browser window size changes, it will not affect the location of the absolute positioning element and the relative positioning of the parent element of the relationship between. The child does not have to adjust the value.

This is a very special and very practical way of application. If you are not comfortable with the positioning control, I believe that the interpretation of the positioning here can be used to locate the use of arbitrary.

relative positioning of the reference:

<div ——————————— position:relative; The nearest ancestor-positioning element, reference
<div —————————-not set to anchor element, not reference
<div ———————-not set to anchor element, not reference
<div Box1
<div Box2--–position:absolute; top:50px; left:120px;
<div Box3

：

The case of a reference to the nearest ancestor positioning element

In Figure 6, Box2 is set to an absolutely positioned element, out of the document flow, and the document flow is changed from Box1-box2-box3 to Box1-box3,box2 with the nearest position ancestor (blue box) as the reference.
The hierarchy relationship is:
<div ——————————— position:relative; Not the nearest ancestor-positioning element, not a reference.
<div —————————-not set to anchor element, not reference
<div ———————-position:relative Reference
<div Box1
<div Box2--–position:absolute; top:50px; left:120px;
<div Box3
：

Transferred from: http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08