CSS positioning in-depth understanding of CSS positioning relative positioning and absolute positioning

In fact, the front of the standard flow and floating flow are very understanding, that is, the positioning is not very good understanding, especially relative positioning and absolute positioning, a lot of students just start learning bad distinction. So here, Mr. Xiao Qiang and everyone to share CSS positioning learning.

Through our previous study, our Web page layout method:

1. Standard flow (most stable)

2. Floating stream (float second)

3. Position flow (stability last)

Positioning is a form of layout that is completely out of standard flow.

In fact, the front of the standard flow and floating flow are very understanding, that is, the positioning is not very good understanding, especially relative positioning and absolute positioning, a lot of students just start learning bad distinction. So here, Mr. Xiao Qiang and everyone to share CSS positioning learning.

We know that the positioning is used in conjunction with the azimuth nouns, adjusting the position, most of the use of top,left,bottom,right with the use of.

First we look at the classification of positioning:

1. Absolute positioning Absolute

Position:absolute;

The absolute positioning and relative positioning of the relative, is more than the place. Absolute positioning in the end have what characteristics, here, Xiao Qiang teacher, to everyone summed up.

1. If the location does not have a parent box

Then this box, plus absolute positioning, is the top left corner of the browser as the origin, all the movement, but also to the origin of the movement.

Case



After previewing

2. If there is a parent box, but the parent box, there is no positioning, then the result will not change, the box will still be the top left corner of the browser as the Origin point.

After previewing

3. If there is a parent box, and the parent box has a position, then the absolute position is aligned in the upper-left corner of the parent box as the origin point.

Build Effect:

4. Absolute positioning has a very important feature, does not occupy the position, completely out of the standard flow, so it will rise up, its back side will have a standard flow occupy. 2. Relative positioning (relative)

Position:relative

Relative positioning is simple, regardless of whether there is a parent box, it is in its own upper left corner as the origin point.

Also, it occupies a position, that is, there are other boxes, which will be lined up below.

3. Fixed positioning

Position:fixed

Fixed positioning is also relative to the browser, he is fixed to a browser location. (IE6 does not support fixed positioning, can only be resolved separately)

Fixed positioning, also does not occupy position, completely out of standard flow.

4. Static positioning

Position:static

He is almost the same as the standard flow, no special positioning, and is occupied position.

5. Stacking order:

Z-index: Numerical value;
The larger the value, the more the box needs attention: The value must not be added to the unit after.
. One{z-index:10;}

Summarize:

In terms of positioning, the position of the occupied static positioning and relative relative positioning, does not occupy the position of the absolute absolute positioning and fixed positioning. This is very important and has a great impact on our layout of the standard flow.
We must remember that the formula is that the child is absolute, the parent is relative. This is the most suitable layout concept for our layout.