CSS position relative positioning and absolute positioning

First, the four values ​​of position: static, relative, absolute, fixed.

Absolute positioning: absolute and fixed are collectively referred to as absolute positioning

Relative positioning: relative

Default: static

Second, the difference between relative positioning and absolute positioning

Example:

HTML code:

css code:

Initial effect:

1, relative: relative to the original position, the element is still in the document flow after setting this property, does not affect the layout of other elements

Set relative to the second box:

The element is offset relative to the original position, and the width and height are not changed, which expands the container.

2. absolute: The element will leave the document stream. If the offset is set, it will affect the position and positioning of other elements.

Set only the fifth box to absolute:

Note: In the case of an element without a defined width, the width is determined by the content of the element, and the effect is the same as using the float method.

Analysis of Absolute positioning principle:

1. In the case where the parent element is not set relative positioning or absolute positioning, the element is positioned relative to the root element (that is, the html element) (the parent element does not).

Now give the box5 offset value to verify:

2. The parent element is set relative or absolute positioning, and the element will be positioned relative to the parent element that has the relative or absolute positioning closest to itself (or the parent element that is closest to itself is not static, because the element defaults to static).

Added: Some people on the Internet explain that the element will be positioned relative to the first parent element that is not static. I think this is easy to cause misunderstanding. The above is my own definition.

Now give the body element an absolute positioning (the body element is set to absolute, the width of the entire container is determined by the longest div, the width has become smaller):

Box5 at this time is now positioned relative to the body element

I put the two images above positioning relative to the html element and positioning relative to the body. In comparison, you can see the following figure. The box5 positioned relative to the body is a little farther from the text box1. Therefore, in the case of no relative positioning or absolute positioning of the parent element, the element set with absolute will be positioned relative to the html root element.

css code:

Let's verify this sentence again: if the parent element has relative positioning or absolute positioning, the element will be positioned relative to the parent element that has the relative or absolute positioning closest to itself.

Now set the boxes to three parent containers, as follows:

html code:

The CSS styles of the three parent containers are as follows:

As it is now, the current box5 is not said to be positioned relative to the first element that is not static (according to this sentence, my box5 should now be offset from the outermost container 1), but Relative or absolute positioning of the parent element relative to the nearest layer:

Now comment out the positions of the second container and the third container (without position, setting top, left, bottom, and right values ​​have no effect), the result is as follows:

Now the outer layer of box5 is set to the relative or absolute parent element only the outermost container 1, so box5 is now positioned relative to the outermost container 1. (Obviously box5 moved)

Now comment out only the position of the third container

The principle is the same, it is positioned relative to the second container (top: 50px, the parent element that has the relative or absolute positioning closest to itself):

The second and third containers above are set relative positioning, now changed to absolute positioning:

css code:

The principle is the same as setting the second and third containers to relative, but after setting it to absolute, the third container contains the content and leaves the document together, so the width of the outer two containers is not stretched.

The effect now:

Add another container outside to verify the effect of the first and second unopened above

The width is limited by the width of the parent container of the previous layer. Now the width of the container of the first layer is widened, and the second and third layers are widened. The effect is as follows:

Zh

But if there is a long div inside the container, the container can still be stretched, the effect is as follows:

Added:

After box2 is set to absolute positioning, out of the document stream, box3 moves up, and the left side is covered by box2.

Zh

Based on the above, box3 is set to absolute, box3 is separated from the document stream (as if box3 floats and floats on top of box2), box4 moves up, box3 covers box2, and part of box4.

Similarly, if box4 is set to absolute positioning, it will float to cover box3 and box2.

to sum up

relative: positioning is relative to its own position (when setting the offset, it will be offset relative to its own position). The element with the relative setting is still in the document flow, the width and height of the element are not changed, and the offset does not affect the position of other elements. The outermost container is set to relative positioning. If no width is set, the width is the width of the entire browser.

absolute: Positioning is determined relative to the parent element that has the absolute or relative positioning closest to the element. If there is no parent element that sets absolute or relative positioning, the element is positioned relative to the root element, that is, the html element. An element that has been set off the document stream, and the width of the element is determined by the content of the element if the element has no width. After separation, the original position is equivalent to being empty, and the following elements will come to occupy the position.

Author: