CSS Analysis of position:relative/absolute Positioning Mode

I. position:relative relative positioning

The analysis is divided into two situations:

No position: relative

There is position: relative.

The code is shown below:

The display effect is as follows:

We add the position: relative attribute to box4. * if the element adds a position: relative attribute; the element defaults to the block level element. * if TRBL (top, right, bottom, left) is not given, the location and style of the element remain unchanged. * when a TRBL is given, it is moved relative to the previous position (the initial position of the element, or the position when the element has not added position: relative). * and box4 is liberated and will not be wrapped by the parent element. 2. Position: absolute absolute positioning # #

The analysis is divided into three situations:

No position: absolute

There is position: absolute

There is position: absolute, and add position: relative to the parent element.

The code is shown below:

The browser displays as follows:

The second case: * add the position: absolute attribute to box4. * if the element adds a position: assolute attribute, the element defaults to display: inline-block. * if no TRBL (top, right, bottom, left) is given, the position of the element remains the same, but only becomes an inline element. * when TRBL is given, it is moved relative to Body. The third case: * add the position: relative attribute to box4. * if the element adds a position: relative attribute; the element defaults to the block level element. * if TRBL (top, right, bottom, left) is not given, the location and style of the element remain unchanged. * when a TRBL is given, it is moved relative to the previous position (the initial position of the element, or the position when the element has not added position: relative). * and box4 is liberated and will not be wrapped by the parent element.