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

Let's talk about relative positioning.
The element box set to relative positioning offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains.

In short, relative positioning is based on his own positioning, his coordinate point is his own div in the upper left corner

You can see that relative positioning is positioned on its own and is not constrained by the parent Div
One might ask, where was his former position? And how it's positioned according to its own
Take the position:relative and remove it is his former position.

What if the parent level defines absolute or relative positioning?


You'll find no change
That is, relative positioning regardless of whether the parent layer is a normal div, or floating or absolute positioning and relative positioning, on its own movement without any influence, he only with his own upper-left corner coordinate point movement, this is independent
However, the change of the parent layer will affect his original position, he is based on the original position of the upper left corner to move, and then to a new position, so that the parent layer how to move, then he will also move accordingly

When the relative positioning Div touches the normal div

#c {width:100px;height:100px;border:soild;background:red;} #b {width:100px;height:100px;border:soild;background: green;position:relative; } </style> 

Green is relative positioning Div, it can be seen that if you do not give relative positioning Div definition coordinates (that is, top,left), he and ordinary div is no different, the same follow the ground flow pattern, the ground Div also see him, if the red is floating div, Then he would not see a floating div like a normal div, thus going to the red area.
If you define the coordinates for him,

#b {width:100px;height:100px;border:soild;background:green;position:relative;top:-20px:/* Move up, and the left has a negative value. left:20px;}

You can see that he can cover the red area, which is exactly the same as the absolute position.
In other words, he didn't take off until he defined the coordinates, just like the normal Div.
After defining the coordinates, he took off, and it was the airship.
Here, if the absolute position does not define the coordinates at the beginning, he is in the upper left corner of the browser or the parent layer (to define absolute or relative positioning), it is always in the air, does not occupy the area of the ground
The relative positioning is the same as the absolute positioning, you can move freely in the air, do not have to follow the flow, but they two take the coordinate starting point is different
But the relative positioning does not take off is the ordinary Div, occupy the ground area, follow the flow
After takeoff, his original area (where it was not taken off) had to be retained, and would not allow the normal div and floating div to take up
is to take off the time to tell the Web page: "I took off after taking off to see my original position is empty, do not let the other layers to my account!! ”



Green is the relative positioning Div, red is the ordinary div, here can be seen, even if the green active move below, Red will not occupy the area



When relative positioning encounters relative positioning



The red did not take off, the Green took off, but the green in the red below, which indicates that the relative positioning of the coordinates do not define the div is not absolutely equal to the ordinary Div, when the two relative positioning together appear, the final appearance will cover the front, which is the same as the absolute positioning, green in the air, red ground, because So the green cover red part to be transparent
(There is also an understanding that the relative positioning is also always in the air, it occupies the area with the ground is synchronized, that is, the ground div can not run down to it, but the condition is that it must follow the ground flow pattern rules, specifically with which kind of understanding, see what kind of understanding you think. I admit it's a little messy here ... ）

When relative positioning encounters absolute positioning



Same, red on top.
There's no difference between relative positioning and absolute positioning, only the starting point of the coordinates is different.
They can also use the Z-index to set the stacking order, relative positioning encountered relative positioning is the same

The following is a fixed positioning fix; Top left based on this setting

In fact, is very simple, is fixed in a position, the browser (scroll bar) How to move will not move

Baidu Paste bar Right bottom corner

Back to the top is the fixed positioning

Position the meaning of the property value:
Static (this is the default)
The element box is generated normally. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element.
Relative
The element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains.
Absolute
The element box is completely removed from the document flow and is positioned relative to its containing block. The containing block 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 did not exist. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow.
Fixed
The element box behaves like the position is set to absolute, but its containing block is the window itself.

Here's a summary
Normal div--ground follows ground flow pattern
Floating div--air follows the air flow pattern is the same height
Positioning div--The air does not follow the flow pattern higher than the floating div is not all the same height

In the layout of the page, generally the large box (the most parent layer) is defined as relative positioning, but does not give coordinates, so that he can follow the flow pattern, centering what is very convenient, and the big box inside with absolute positioning, so that you can move with the large box to move
But not the use of positioning is not necessary, like to use margin can also, but certainly not the absolute positioning & relative positioning is convenient
The development of Web page layout
Table positioning---margin positioning---absolute & relative & fixed positioning

All right, I'm almost done with the main thing, now let's cut a few pictures and see





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

