CSS Position

CSS position is a property that determines how an element is positioned within the document. The position property can be set to one of the following values:

  • static: This is the default value, and elements are positioned in the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect when position is set to static.
  • relative: Elements are positioned relative to their normal position in the document flow. The top, right, bottom, and left properties can be used to adjust the position relative to the element's normal position.
  • absolute: Elements are positioned relative to their nearest positioned ancestor (an ancestor with position set to relative, absolute, or fixed), or the initial containing block if there is no positioned ancestor. The top, right, bottom, and left properties can be used to adjust the position relative to the positioned ancestor.
  • fixed: Elements are positioned relative to the viewport, and will not move even if the page is scrolled. The top, right, bottom, and left properties can be used to adjust the position relative to the viewport.
  • sticky: Elements are positioned relative to their nearest ancestor with a scrolling mechanism (such as overflow:auto, overflow:scroll, or overflow-y:scroll), and will "stick" to the top or bottom of the scrolling area as appropriate. The top, right, bottom, and left properties can be used to adjust the position relative to the scrolling area.

Here is an example of how to use the position property:

div {
    position: relative;
    top: 20px;
    left: 30px;
  }

In this example, the div element is positioned relative to its normal position in the document flow. The top and left properties are used to adjust the position of the element 20 pixels down and 30 pixels to the right from its normal position.

The position property is commonly used to create complex layouts, such as overlapping elements or elements that stay fixed in a particular position even as the user scrolls the page. However, it's important to use position carefully, as it can be tricky to get right and can lead to unexpected behavior if not used correctly.

Next Article ❯