What are the values ​​of position attribute in css

The position attribute specifies the positioning method of the element, including the following values: static: the normal position of the element in the document flow relative: moved relative to the original position, without affecting other elements absolute: removed from the document flow, according to the parent element Or body positioning fixed: fixed in the viewport, maintain position when scrolling sticky: fixed in the viewport or container after reaching the threshold

in CSS position attribute value

The position attribute is used to specify how an element is positioned within a parent element or page. It has the following possible values:

1. static (default value) The

• element is located at its normal position in the document flow.

2. relative

• The element moves relative to its original position without affecting the position of other elements.

3. The absolute

• element is removed from the document flow and is based on its parent element or Element (if no parent element is specified) positioning.

4. fixed

• The element is fixed to the viewport and remains in the same position when the page is scrolled.

5. sticky

• #The element is fixed in the viewport or container after reaching the specified threshold.

Usage examples:

/* 将元素向右移动 50px */
.element {
  position: relative;
  left: 50px;
}

/* 将元素从页面顶部 100px 处开始定位 */
.element {
  position: absolute;
  top: 100px;
}

/* 将元素固定在视口右侧 */
.element {
  position: fixed;
  right: 0;
}

Guidelines for choosing appropriate position values:

• If the element To be in the normal position of the document flow, use static.
• If you need to move an element relative to its original position, use relative.
• If you need to remove elements from the document flow, use absolute or fixed.
• If you need to keep an element in the viewport while scrolling, use sticky.

The above is the detailed content of What are the values ​​of position attribute in css. For more information, please follow other related articles on the PHP Chinese website!