CSS Re-learning Series (2)

From

Http://www.cnblogs.com/liuzhaoyang/articles/3289456.html

Position positioning: Relative | Absolute positioning has always been a difficult point in the application of Web standards, if the position is not clear, then the effect may not be achieved, 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 : CSS positioning cascading rating:z-index:auto | namber;
Auto follows its parent object's positioning namber An integer value of 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; }

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 original occupied position of the object is retained, and the object behind it remains the same as the original document flow, and the value of top represents the distance that the object is offset downward from the original position bottom the value of the object that is offset upward from the original position. When both exist, only top works. The left value represents the distance to the right of the object relative to its original position, and the value of the object indicates that the distance between the objects is offset from the opposite of the original position.

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).

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 , the object is extracted from the document stream, and the original position is replaced by the next object. The value of top represents the distance from the top of the browser window to the upper border of the object and the distance from the bottom of the browser window that represents the value of the object's border bottom 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 right of the browser window. The value of right indicates that the left side of the object is the same as the distance between the side of the browser window, and that the other side is the same as the position of the original document flow, i.e. 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.

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, the reference <div —————————-is not set as the anchor element, not the referential <div ———————-not set as the anchor element, not the referencing Material <div box1 <div box2--–position:absolute; top:50px;        left:120px; <div Box3

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

CSS Re-learning Series (2)