On the position attribute in css

In my opinion, if css does not consider the compatibility of browsers, the most annoying thing is position. I think so, in order to be able to understand the position situations, I found some materials and made a small experiment. below is the experiment process. I will share it with you.

This is the description of position values in w3school:

Static, fixed, and inherit are relatively simple.

First, we need to prepare several elements for comparison:

    div1    div2    div3    div4

{:;}{:;:;:;}{:;:;:;}{:;:;:;}{:;:;:;}

This is what it looks like:

It's a bit too long. The following is the topic.

1. relative (relative positioning)

We add the property of relative positioning to div2, move 20 PX down, And right shift 40px:

{:;:;:;:;:;:;}

Let's take a look at the effect:

Obviously, div2 is moving, but (there must be "but", otherwise it is nonsense), the positions of other divs are not changed, and, the space occupied by div2 is still there, but it seems that div2 is floating and occupies two positions. Well, this is the so-called "relative.

2. absolute (absolute positioning)

Let's add the absolute positioning attribute to div3:

{:;:;:;:;:;:;}

The effect is like this:

Div3 ran to the upper left corner (0, 0) of the page and did not occupy the original space. Because div4 moved up, there is still a blank space, because div2 is relatively positioned. It can be understood that div3 is out of normal stream (what? What is a stream? That what, Gu Ge, du Niang), with the "T-R-B-L" change the current position.

Now the problem is coming again. Isn't it the same as fixed? Is it positioned relative to the browser window? Okay, it's not the end of the study. What if I add the positioning attribute to div1 based on the current situation? (⊙ O ⊙ )... Div1 is invisible. It is the Black Block.

{:;:;:;:;}

OK! This is the difference with fixed ,.

The theory is like this. It is not difficult to understand it. As for how far it can be mastered, well, just write more.