Introduction to relative positioning and absolute positioning in CSS

1. Generally, if we do not set position for an element, the default is static. At this time, the element is not positioned, and offset attributes such as left/right have no effect.

2.position:relative (relative positioning)

If set to relative positioning, you can configure the left/right offsets relative to the original position of the element , and the original position still occupies the space of the document flow, and the offset will not crowd out other elements, So if overlap occurs, the stacking order can be set through z-index.

3.position:absolute

When an element is set to absolute positioning, it does not occupy space in the document flow and will float. Different from relative positioning, absolute positioning will delete the space of the original position in the document flow. Positioning is positioned through the parent element that is not static. (If the parent element is static, then find the parent element of the parent element. Element, go to the upper level to find).

The above is the detailed content of Introduction to relative positioning and absolute positioning in CSS. For more information, please follow other related articles on the PHP Chinese website!