Div+css relative positioning and absolute positioning

Today suddenly found themselves in the layout of the time thinking is very messy, so resolutely want to re-rationale for their layout ideas, today, start from the positioning of it ~

Absolute positioning (absolute): the object assigned to this targeting method is dragged from the document stream, and if the object's parent does not have a positioning property set, it is positioned as a reference based on the upper-left corner of the body object. Absolute positioning objects can cascade, cascade order can be controlled by the Z-index property, Z-index value is no unit of integers, large at the top, can have negative values (currently negative FF is not supported).

At the same time Z-index can only work on the positioning elements!!!

Relative positioning (relative): objects are not stackable and are offset from the normal document stream by attributes such as Left,right,top,bottom. You can also use Z-index layering design.

　　

2. Image interpretation of positioning

I'm going to set up a virtual scene: There's a rectangular room with a bucket of water in it, a watermelon in the water, and a lot of hooks for hanging things in midair. Now I have the page element corresponds to the above object, then the room is a Web page, the bucket is a plate in the page, the bucket of water is the text flow, watermelon is to be positioned object.

(1) Absolute positioning of contributions (absolute)

Compared to the previous explanation, if the watermelon is given absolute positioning, then it is equal to remove the watermelon from the water hanging in mid-air hooks, the water in the bucket of the original space will automatically fill the watermelon (the absolute positioning of the object will let itself occupy the position, so that it is a contribution). At this time if not before the bucket positioning settings, then picked up the watermelon position will not be affected by the bucket position, how to move the bucket, watermelon or hanging in the original position, as to how to put the watermelon, the room left upper corner (body upper left corner), with Left,right,top,bottom value to locate.

But if the bucket is also given the positioning settings (usually relative positioning, the following talk about this practical technique), the watermelon is not placed so free, although at this time the watermelon is picked up will not affect the water in the bucket (text flow), but it is to listen to barrels, barrels will tell the watermelon "you can activities, But it should be in my range, for example, I want you in my upper left 1 meters, you have to die this, I go you also have to follow away ", if the bucket has a lot of watermelon, can be taken out of the hanging in midair, they will be arranged in different heights of space (layer), so in the roof vertical look down, It is possible to see different watermelons stacked together (the so-called height does not exist in the Web page, as the elements are arranged on different layers of the Flash animation, but they do not have a sense of depth when viewed). The object reference target of the visible absolute positioning is its parent, which the profession calls the inclusion block.

(2) The relative positioning of selfishness (relative)

One of the biggest features of relative positioning is that you run away from the position and occupy the original position, not to the surrounding objects such as text flow. Relative positioning is also relatively independent, do what it is the final decision, to locate the time, it is in its own position offset (relative to the object itself). Then take the front for example to solve, then the watermelon seems to have magical, if the watermelon by relative positioning in the bucket offset you will see a real life phenomenon: there is a place in the water concave down, the surrounding water can not fill it, watermelon looks in the side, if stirring the water in the bucket, The concave position will find a change (text flow has an effect on relative positioning objects), but the distance from the concave to the watermelon remains the same. The visible text stream also affects each other because the object is not really out of the flow of text, as there are two of people who have a chance to meet when they move horizontally on the same floor.

(3) Summarize the characteristics of two kinds of positioning

Absolute positioning is like arranging different objects into different floors of a high-rise (generally not the first level, which we understand as text flow is on the first floor), they do not affect each other, but how they move is related to the foundation and area of your building (parent). Relative positioning refers to whether the object or the first floor is stored with the text stream, and there must be an impact between them.

　　

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
：

To change the effect of the reference (Orange box)
The hierarchy relationship is:
<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 reference is the top-level element case .
The hierarchy relationship is:
<div ——————————— not set to anchor element, not 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
：

Use only the Margin property layout to position elements absolutely
In this case, the values of Margin-bottom and margin-right no longer affect the elements in the document flow because the element has been detached from the document flow. In addition, regardless of whether its ancestor element is positioned, it is offset from the original position in the document stream.
In Figure 9, you use the Margin property layout to position elements relative to each other.
The hierarchy relationship is:
<div ——————————— position:relative; Not a reference.
<div —————————-not set to anchor element, not reference
<div ———————-not set to anchor element, not reference
<div Box1
<div Box2--–position:absolute; margin-top:50px; margin-left:120px;
<div Box3
：

In the case of IE6, there is no sibling node in front of Box2, then the value of Margin-left appears double margin, as shown in Figure 10.
The hierarchy relationship is:
<div ——————————— position:relative; Not a reference.
<div —————————-not set to anchor element, not reference
<div ———————-not set to anchor element, not reference
<div Box1
<div Box2--–position:absolute; margin-top:50px; margin-left:60px;
<div Box3
：