In-depth understanding of CSS positioning, complete mastery of CSS positioning, relative positioning and absolute positioning_html/css_WEB-ITnose

In fact, the previous standard flow and floating flow are very understandable, but positioning is not easy to understand, especially relative positioning and absolute positioning. Many students who are just starting to learn cannot distinguish between them. So here, Teacher Xiaoqiang shares with you the learning of CSS positioning.

Through our previous studies, our web page layout method:

1. Standard flow (the most stable)

2. Floating flow (float second)

3. Positioning flow (last in stability)

Positioning is a layout method that is completely separated from the standard flow.

In fact, the previous standard flow and floating flow are very understandable, but positioning is not easy to understand, especially relative positioning and absolute positioning. Many students who are just starting to learn cannot distinguish between them. So here, Teacher Xiaoqiang shares with you the learning of CSS positioning.

We know that positioning is used together with directional nouns. To adjust the position, most of them use top, left, bottom, and right.

First, let’s look at the classification of positioning:

1. Absolute positioning absolute

position: absolute;

Used for absolute positioning and relative positioning Relatively speaking, there are more places. What are the characteristics of absolute positioning? Here, Teacher Xiaoqiang will summarize it for everyone.

1. If the positioning does not have a parent box

then this box, after adding absolute positioning, will take the upper left corner of the browser as the origin, and all movements will also be based on that The origin is moved.

The case is as shown in the picture:



After preview

2. If there is a parent box, but the parent box, Without positioning, the result will not change, and the box will still take the upper left corner of the browser as its origin.

After preview

3. If there is a parent box and the parent box has positioning, then at this time, the absolute positioning will be based on the parent box The upper left corner is the origin and aligned.

As shown in the picture:



Generating effect:

4. Absolute positioning has a very important feature, It does not occupy any position and is completely separated from the standard flow, so it will rise and the standard flow will occupy its rear side.

2. Relative positioning (relative)

position:relative

Relative positioning is simple. Regardless of whether there is a parent box or not, it takes its upper left corner as the origin.

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

3. Fixed positioning

position: fixed

Fixed positioning is also relative to the browser, it is fixed at a certain position in the browser. (IE6 does not support fixed positioning and can only be solved separately)

Fixed positioning does not occupy a position and is completely out of the standard flow.

4. Static positioning

position:static

It is almost the same as the standard flow, there is no special positioning, and it occupies position.

5. Stacking order:

z-index: numerical value;
The larger the value, the higher the box. Note: You must not add units after the value.
.one{z-index:10;}

Summary:

In terms of positioning, there are static positioning and relative positioning that occupy position, and absolute positioning that does not occupy position. Positioning and fixed fixed positioning. This is very important and has a great impact on our layout of standard flow.
The mantra we must remember is that children are absolute and parents are relative. This is the most suitable layout concept for our layout.