Css positioning, css relative positioning

Css positioning, css relative positioning

1. Relative positioning

If an element is relatively located, it appears at its location. Then, you can set the vertical or horizontal position to move the element "relative to" its start point.

If you set top to 20px, the box is 20 pixels at the top of the original position. If left is set to 30 pixels, a 30-pixel space is created on the left of the element, that is, the element is moved to the right.

# Box_relative {position: relative; left: 30px; top: 20px ;}

Note that when relative positioning is used, elements still occupy the original space, regardless of whether or not they are moved. Therefore, moving an element overwrites other boxes.

Ii. Absolute Positioning

Absolute positioning makes the element position irrelevant to the Document Stream, so it does not occupy space. This is different from relative positioning. Relative positioning is actually considered as part of the normal stream positioning model, because the position of an element is relative to its position in the normal stream.

# Box_relative {position: absolute; left: 30px; top: 20px ;}

Tip: Because the absolute positioning boxes are irrelevant to the Document Stream, they can overwrite other elements on the page. You can set the z-index attribute to control the stacking order of these boxes.

Z-index attribute: the value of the z-index attribute is higher than that of the user.