On relative and Absolute

  • Relative and Absolute belong to the attributes in position. Besides these two attributes, positon also has two other attributes, namely static and fixed. Let’s forget about the latter two attributes and talk about relative and absolute. Let’s start now.

absolute

Absolute, as its name implies, can be translated as absolute in English, and the properties it represents in CSS are also called absolute positioning.

The format is as follows:

    position:absolute;
Copy the code

Ok,, now let’s talk about its specific form!

First let’s look at some CSS code. First let’s define two boxes, named red and blue.

<div class="red"></div>
<div class="blue"></div>
Copy the code

Then add the corresponding properties to the red and blue boxes

.red{
        background-color: red;
        width: 100px;
        height: 100px;
    }
.blue{
        background-color: blue;
        width: 100px;
        height: 100px;
    }
Copy the code

When we do not set the box position property, the layout of the two boxes looks like this :(shown in the top left corner)

Graph one:

As you can see from the picture, the two boxes occupy a total height of 200px and fill up the entire width.

Let’s add absolute to the red box:

Figure 2:

Figure 3:

Comparing the above figures, we can see from Figure 2 that when the Position attribute is added to the Red box, the element overlay only covers the Red box (100*100). Let’s look at the blue box in Figure 3. It says (div: Blue 100 X 100). Why don’t we see the blue box? This brings us to the hierarchy, which we won’t go into here. Who’s going to wonder again? Why do these two boxes overlap? This is a property of Absolute:

When absolute is used, the box has been removed from the text line and completely removed from the text stream. Now we modify the code as follows:

.red{ background-color: red; width: 100px; height: 100px; position: absolute; left:50px; top: 50px; }. Blue {background-color: blue; background-color: blue; width: 200px; height: 200px; } .yellow{ background-color: yellow; width: 100px; height: 100px; } < div class = "yellow" > < / div > < div class = "blue" > < div class = "red" > < / div > < / div > / / here only post box custom codeCopy the code

The effect is as follows:

Figure 4:

What can we see from Figure 4?

If you change the position of red box with left and right, the position of red box will be adjusted accordingly (based on the upper left corner). How can we make it adjust the position of other boxes?

If we add position:apsolute; Property, how will the page display?

Fig5.

Add position:apsolute to yellow box; After the element, the box is completely removed from the text stream (it doesn’t take up any space on the page), so the Blue box is moved up (blue becomes the first box)

What if you add that element to a Blue box? What happens to the page? (We delete the position attribute in the yellow box)

Figure 6:

We see that the red box seems to move, relative to the blue box. Why is this?

When we define box properties, each box has a default position property, which is static.

Position: apsolute; Position: apsolute; The back top and left are positioned relative to its nearest parent element that is not static positioned.

reletive

Reletive is relative as the name implies, and the properties it represents in CSS are also called relative positioning;

The format is as follows:

position:reletive;
Copy the code

Without further ado, first paste the definition code:

.red{ background-color: red; width: 100px; height: 100px; } .blue{ background-color: blue; width: 200px; height: 200px; position: relative; } .yellow{ background-color: yellow; width: 100px; height: 100px; } < div class = "yellow" > < / div > < div class = "blue" > < div class = "red" > < / div > < / div > / definition/boxCopy the code

Here we add position: relative to the blue box. Properties.

The effect is as follows:

Figure 7:

At first glance!!

I’m not in position: relative; Property, the page displays the same. Let’s add some more attributes to the Blue box (top: 50px; Left: 50 px;)

.blue{
    background-color: blue;
    width: 200px;
    height: 200px;
    position: relative;
    top: 50px;
    left: 50px;
}
Copy the code

Will the page change at this point?

The answer is absolutely yes.

Figure 8:

Here we would like to add:

  • The box position cannot be adjusted using left, right, top, or bottom without using position or position:static on the box

It is not difficult to see from the figure that the position of the blue box is changed relative to the original blue box (Figure 7). This leads to the term “relative” :

After using “relative” and “left”, “right”, “top”, “bottom”, the box is changed accordingly to its original position

Imagine adding these two attributes to the same HTML file.

The properties of the blue box and yellow box will not change, just add position to the red box :absolute; Add the left and top attributes:

.red{
    background-color: red;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
}
.blue{
    background-color: blue;
    width: 200px;
    height: 200px;
    position: relative;
    top: 50px;
    left: 50px;
    }
.yellow{
    background-color: yellow;
    width: 100px;
    height: 100px;
    }

<div class="yellow"></div>
<div class="blue"><div class="red"></div></div>
Copy the code

The page becomes:

Figure 9:

As you can see, the red box moves relative to the blue box.

So to move a child element, we need to add position:relative to the parent element. Properties. Add position:absolute to the child element that needs to change the default position; Properties.

conclusion

Absolute:

1. When absolute is used, the box has been removed from the text line and completely removed from the text stream. 2. Add position: apsolute; The back top and left are positioned relative to its nearest parent element that is not static positioned.Copy the code

Relative:

1. The elements are still in the document flow. 2Copy the code

Small white one, still hope everybody big guy correct