Analysis of relative, absolute, relativeabsolute

Analysis of relative, absolute, relativeabsolute

When talking about them, we must be familiar with them. Relative: relative positioning. absolute: Definitely positioning. But what exactly are they?

See the following table for w3c definitions.

Positioning	Description
Relative	The element box offsets a certain distance. The element remains in the shape before its position, and its original space remains.
Absolute	The element box is completely deleted from the document stream and located relative to its contained block. The inclusion block may be another element in the document or an initial inclusion block. The space occupied by the element in the normal Document Stream will be closed, as if the element did not exist. After the element is located, a block-level box is generated, regardless of the type of box it generated in the normal stream.

I rely on it. It seems a bit fuzzy.

Don't be afraid. Unity is power. Let's resolve them together step by step.

1. relative

For the above w3c definition of relative, we will first write a demo.

<! DOCTYPE html> As follows:

Combined with the code, I don't know if I found that I moved 10 pixels to the left after setting "relative" to its location. But what? The space that is empty on the right is not covered by the space on the right. ", I'm over! . What is it about?

1. The element after relative positioning is still in the normal stream;

2. The elements after relative positioning are offset relative to their original positions through the left, right, top, and bottom attributes;

3. the space occupied by the element is retained after the element is offset.

In the above code, I don't know if you don't know it. I use the <span> element to enclose the 'relative 'text. <span> it is a line element, so what does it mean?

Guess: position: relative does not change the display of the element.

Well, it's wet when we write a demo.

<! DOCTYPE html>

I added the width and height of the span element to the above Code, but it shows the effect of the row element.

Not satisfied?

I changed the above Code and changed the display of span to inline-block, and set the width and height to 100 pixels. That's exactly what it shows.

<! DOCTYPE html>

Description position: relative does not change the display of elements.

Ii. absolute

For the above w3c definition of absolute, we will also write a demo. However, change <span> in figure 1 to absolute position, position: absolute.

<! DOCTYPE html>

What is this. How can this happen. Hold on, let's take a scale and see what happened. See:

Figure 1

 

Figure 2

Figure 1 shows the width of the entire span element, which is 80 pixels. Figure 2 shows the width of the span element exposed on the page after absolute positioning, Which is 70 pixels.

Therefore, absolute positioning is performed in the upper left corner of the body.

Why?

Because absolute positioning uses the left, right, top, and bottom attributes to perform absolute positioning on the parent object with the closest positioning settings, if the positioning attribute is not set at the parent level of the object, that is, the location is based on the upper left corner of the body object as a reference.

Here, because it is just a span element, its parent element is the body. So this pattern is displayed.

As w3c said, absolute positioning is out of the Document Stream, so absolute positioning is the right text of the element ", I'm over! It will occupy its location when it is no longer in use.

Relative positioning does not change the display of elements. What about absolute positioning?

Absolute positioning will change the display of elements. Convert it into a block-level element mode.

Believe it? Then, we will improve the Code with the above absolute positioning, and set 100 pixels for each width and height of the span element.

<! DOCTYPE html> See:

 

I rely on it. It seems that absolute positioning is quite awkward. It directly changes the display of elements and changes them to block.

Section:

1. The element after the absolute positioning is out of the document flow, and the original space will not be occupied;

2. After absolute positioning, the elements are absolutely located based on the left, right, top, and bottom attributes, which are relative to the parent object with the closest positioning settings, if the positioning attribute is not set at the parent level of the object, that is, the location is based on the upper left corner of the body object as a reference;

3. The element after absolute positioning changes the display of the element to block.

In addition:

No matter whether the elements are set to relative positioning or absolute positioning, they will overwrite other elements. What does this mean?

Taking position: absolute as an Example

<! DOCTYPE html> See

If the Green Box is set to absolute position and the top and left values are both 0, it starts with the body and overwrites the pink box. What if I want a pink box to overwrite the green box that is absolutely positioned? It's easy to set the absolute position of z-index to 0.

Modify the code to test the relative positioning.