What are the categories of relative positioning?

Relative positioning includes classification according to positioning method, classification according to positioning direction, classification according to positioning distance and classification according to positioning reference object. Detailed introduction: 1. Classification according to positioning method includes static positioning, relative positioning, absolute positioning and fixed positioning; 2. Classification according to positioning direction includes horizontal positioning and vertical positioning; 3. Classification according to positioning distance includes static positioning, relative positioning, Absolute positioning and fixed positioning; 4. Classification according to positioning reference objects includes static positioning, relative positioning, absolute positioning and fixed positioning.

The operating system for this tutorial: Windows 10 system, DELL G3 computer.

Relative positioning is a commonly used method in image layout, which can be classified according to different needs and scenarios. The following are some common relative positioning classification methods:

1. Classification based on positioning methods

Static positioning (static): Static positioning is the default positioning method of elements. Arrange according to normal document flow. In this positioning method, the element will not be affected by top, right, bottom and The influence of attributes such as left.

Relative positioning (relative): Relatively positioned elements are adjusted according to their position in the normal document flow. You can set top, right, bottom and left and other attributes to change the position of the element. Relatively positioned elements remain in the document flow and have no impact on other elements.

Absolute positioning (absolute): Absolutely positioned elements will break away from the document flow, relative to their nearest non-static The positioned ancestor element is positioned. If there are no ancestor elements, positioning is relative to the original containing block of the document. You can set top, right, bottom and left and other attributes to change the position of the element. Absolutely positioned elements have an impact on other elements.

Fixed positioning (fixed): Fixed-positioned elements will break away from the document flow and be positioned relative to the browser window. You can set top, right, bottom and left and other attributes to change the position of the element. Fixed positioned elements have an impact on other elements.

2. Classification based on positioning direction

Horizontal positioning: Horizontal positioning means that an element is positioned in the horizontal direction relative to its ancestor elements. This can be achieved by setting the left and right properties.

Vertical positioning: Vertical positioning means that an element is positioned vertically relative to its ancestor elements. This can be achieved by setting the top and bottom properties.

3. Classification based on positioning distance

Static positioning: statically positioned elements will be adjusted according to their position in the normal document flow, but will not change the relationship between elements relative distance.

Relative positioning: Relatively positioned elements will be adjusted according to their position in the normal document flow. You can set top, right, bottom and left and other properties to change the relative distance between elements.

Absolute positioning: An absolutely positioned element will leave the document flow and be positioned relative to its nearest non-statically positioned ancestor element. The relative distance between elements is determined by top, right, bottom and Determined by properties such as left.

Fixed positioning: Fixed-positioned elements will break away from the document flow and be positioned relative to the browser window. The relative distance between elements is determined by properties such as top, right, bottom, and left.

4. Classification based on positioning reference objects

Static positioning: statically positioned elements will be adjusted according to their position in the normal document flow. The reference object is the element in the normal document flow. The position in the document flow.

Relative positioning: Relatively positioned elements will be adjusted according to their position in the normal document flow. The reference is the position of the element in the normal document flow.

Absolute positioning: Absolutely positioned elements will break away from the document flow, relative to their nearest non-static The positioned ancestor element is positioned. The reference is the position of the ancestor element. If there are no ancestor elements, positioning is relative to the original containing block of the document.

Fixed positioning: Fixed-positioned elements will break away from the document flow and be positioned relative to the browser window. The reference object is the position of the browser window.

In short, relative positioning can be classified according to different needs and scenarios. Understanding these classification methods will help you better master the use of relative positioning and achieve more flexible image layout.

The above is the detailed content of What are the categories of relative positioning?. For more information, please follow other related articles on the PHP Chinese website!