Div+css New beginning of Web layout design (9)

Floating is almost finished, the following section of the figure reference reference it

In more words, if the inline element is also set to float, it is automatically equal to a block element, which is equal to setting the display

The following describes the absolute positioning
An element box set to absolute positioning is completely removed from the document flow and is positioned relative to its containing block, which may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element had not existed. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow.

Absolute positioning makes the position of an element independent of the document flow and therefore does not occupy space. This is different from relative positioning, where 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.

The concept of the argument is left aside, simply say
Absolute positioning is not the need for margin, float for positioning, but based on coordinates to locate
The point at which the coordinates start point is the top-left corner of the browser

You can see that the green is not positioned according to his parent Div, but the upper left corner of the browser box
But what if the parent Div also defines absolute positioning or relative positioning?



Then he will be positioned according to the upper-left corner of the parent div (parent-level definition position:relative; same as valid)
That is, if a layer that defines an absolute position is contained by a layer that is not absolutely or relatively positioned, it makes no sense, it is equal to a completely independent Div, not constrained by a layer that is not absolutely or relatively positioned.

In fact, absolute positioning is more than margin positioning, margin positioning needs to take the surrounding div to do the reference, and absolute positioning only need to adjust the coordinates according to the upper left corner
Absolute positioning is out of the text flow, it can go to any area, even if the area has a div occupy the



You can see that it covers the ordinary Div, ignoring the existence of the ordinary div.
Does it also cover floating div?



Blue is normal div, red is floating div, green is absolute position div
As can be seen, the absolute positioning Div is at the highest level and can cover all
Which means the normal div follows the ground flow pattern on the ground.
Floating Div follows the air flow pattern, one is the ground plane, the other is the aircraft in the air
So the absolute positioning Div and so on the airship, than the plane to fly higher, and can move freely

Now take a look at the two absolute positioning Div.



You can see that the green overlay of the red, which shows that two absolute div is no flow mode, so use margin is invalid
They don't exist with each other, they don't control which area is occupied.
So why is green covered in red, not red covered green?
Because here
<div id= "C" ></div>
<div id= "B" ></div>
Because the red div in front, green in the back, the page is from top to bottom, from left to right to parse, so parse to Red Div first appear, Green will overwrite
All in all, the farther forward the absolute positioning Div, is equal to the higher it flies, can overwrite the front of the absolute positioning Div
You drop these two, you'll find the red cover is green.


There is another way, is to use the Z-index attribute, the higher the z-index level of higher flying, not set the default is 0



So that you don't have to consider the order in which the absolute position Div appears.



The above is div+css page layout design New Beginning (9) content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

