The position attribute is a key attribute in CSS that controls the positioning of elements. Common values include static, relative, absolute, fixed, and sticky. static is the default value, and elements are arranged according to the document flow and are not affected by the positioning attributes; relative causes the element to shift relative to its own position but remains in the document flow; absolute allows the element to be positioned based on the most recent non-static positioned ancestor elements and detached from the document flow; fixed is positioned with the viewport as the reference and maintains a fixed position when scrolling; sticky is fixed after scrolling to a specific position, between relative and fixed, and the direction value needs to be specified and the parent element cannot be overflow:hidden. Mastering the characteristics of each value can help to accurately layout.

position attribute of CSS is a very critical part of the layout, but it is often confusing for beginners. It determines how elements are positioned in the page, and different values will make the elements behave completely differently. Understanding the difference between them can help you better control the structure of your web page.

What is the position attribute?

position is an attribute used in CSS to control the positioning method of element. Common values include: static , relative , absolute , fixed and sticky . Each value changes how elements are expressed in the document stream, especially when used with top , bottom , left , and right .

static vs relative: the most basic two positioning

These are the two most confusing but also the most commonly used states.

• static
  This is the default value. Elements are arranged according to normal document flow and will not be affected by positioning attributes such as top and bottom . If you don't set position , it's the state.

  

• relative
  The element remains in the document stream, but it can be offset from its original position using top , bottom , left , and right . for example:

   .box {
    position: relative;
    top: 10px;
    left: 20px;
  }

  This way the box will move 10px down and 20px right, but the rest will not fill its original position.

Note: Relative positioning is often used as a "reference point" for absolute positioning elements.

absolute and fixed: How to locate without document flow

These two values will make the element separate from the document stream and perform more flexiblely.

• absolute
  Elements are positioned based on the most recent ancestor element that has set a non- static positioning. If there is no such ancestor, you will keep looking up until the viewport or a certain positioned ancestor.

  For example, if you want to make a pop-up window, you usually set the parent container to relative and then set the pop-up window to absolute , so that you can accurately control the position.

• fixed
  Similar to absolute , but it always takes the browser viewport as a reference point. Even if the page is scrolled, it will be fixed in that position. Common in the navigation bar or back to the top button.

Tips: When using absolute or fixed , remember to check whether the parent has set the appropriate positioning, otherwise it may be located in unexpected places.

sticky: sticky positioning, between relative and fixed

sticky is a very practical but special positioning method. It looks like relative , but after scrolling to a certain threshold, it is fixed in a certain position like fixed .

For example, you want the table header to remain visible when scrolling:

 th {
  position: sticky;
  top: 0;
  background: white;
}

At this time, when the user scrolls the page, the header will "stick" on the screen when scrolling to the top.

Notes:

• top , bottom , left or right must be specified to take effect.
• The parent element cannot set overflow: hidden , otherwise sticky will not work.
• It supports well in modern browsers, but is not compatible in older versions of IE.

Basically that's it. The differences between different position values are actually not complicated, but it is easy to ignore some details in actual use, such as changes in document flow, the impact of parent positioning, etc. Mastering these well will make you more comfortable when making layouts.

The above is the detailed content of Explaining the CSS position property differences. For more information, please follow other related articles on the PHP Chinese website!