What are the values ​​of the CSS Position property?

CSS Position attribute values ​​are: 1. static, which is the default value of position; 2. fixed, which generates fixedly positioned elements; 3. absolute, which generates absolutely positioned elements; 4. relative, which generates relatively positioned elements. Element; 5. inherit, inherit the parent attribute value.

1. position: relative; relative positioning

• does not affect the characteristics of the element itself (whether the block element or the inner The linked element will retain its original characteristics)

• will not take the element out of the document flow (the original position of the element will be retained, even if the position is changed, the new position will not be occupied)

• If there is no positioning offset, it will have no effect on the element (offset relative to its original position)

• Promote the level (you can use the value of z-index style) Change the hierarchical relationship of a positioned element, thereby changing the covering relationship of the element. The larger the value, the higher it is. Z-index can only be effective on elements whose position attribute value is relative, absolute, or fixed.) (Both are positioned elements, The latter will overwrite the previous positioning)

2. position: absolute; absolute positioning

• makes the element completely out of the document flow (in the document flow No more space is occupied in the middle)

• Make the inline element support width and height when setting the width and height (change the characteristics of the inline element)

• Make the block element expand its width by the content when the width is not set (change the characteristics of the block element)

• Offset relative to the most recent positioned parent element (if its parent If the element is not positioned, search it layer by layer until document - page document object)

• Relative positioning is generally used in conjunction with absolute positioning (set the parent element to relative positioning so that it is relative to the parent element Offset)

• Promote level (same as relative positioning)

3. position: fixed; fixed positioning

fixed generation Fixed positioned elements are positioned relative to the browser window.

4. position:static: default value

Default layout. The element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).

6. position: inherit

Specifies that the value of the position attribute should be inherited from the parent element.

Recommended tutorial: "CSS Tutorial"

The above is the detailed content of What are the values ​​of the CSS Position property?. For more information, please follow other related articles on the PHP Chinese website!