Conditions for relative or absolute positioning

To understand positioning, you must first understand the document flow. The relatively positioned elements in the document flow occupy a position and will affect subsequent elements (block elements, inline block elements). For example, if two p's are side by side, the other one will wrap.

111

##

222

Absolute positioning is to remove the element from the document flow Kicked out, it will not occupy the position of the document flow, nor will it affect subsequent elements.

111

222

As above In the instance, 111 and 222 will overlap, inspect the elements and you will find that 222 has an actual position and 111 has no position. It uses left, right, top, bottom and other attributes to perform absolute positioning relative to its closest parent object with the most positioning settings. If there is no such parent object, it is based on the body object. And its cascade is defined through the z-index attribute.

Web page layout involves compatibility with various devices and resolutions, so absolute positioning is destined to not be applicable to most scenarios. . So the layout can only depend on the position of the superior element, not the height and width of the device.

The scenarios suitable for absolute positioning are mainly some page auxiliary functions.

The above is the detailed content of Conditions for relative or absolute positioning. For more information, please follow other related articles on the PHP Chinese website!