CSS <position> Data Type

Description

The <position> CSS data type defines how an element is positioned in the document. It controls whether an element is placed in the normal flow of the document, anchored relative to its parent, or fixed with respect to the viewport. Understanding <position> is crucial for designing layouts, creating dynamic interfaces, and controlling how elements interact with each other on a page. The behavior of positioned elements often interacts with properties such as top, right, bottom, and left, which allow precise control over an element's placement when it is removed from the normal flow.

There are several key values for <position>:

static: The default positioning where elements follow the normal flow of the document. Static elements do not respond to the top, right, bottom, or left properties.
relative: Positions the element relative to its normal location. Using top, right, bottom, or left offsets the element from where it would normally be placed.
absolute: Removes the element from the normal document flow and positions it relative to its closest positioned ancestor (an element whose is not static).
fixed: Positions the element relative to the viewport, so it stays in the same place even when the page is scrolled.
sticky: Acts like a hybrid of relative and fixed. The element is relative until it crosses a threshold defined by scroll position, after which it behaves like fixed.

For example:

/* Example of different <position> values */
.static-box {
  position: static;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px;
  left: 20px;
  background-color: lightgreen;
}

.absolute-box {
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: lightcoral;
}

.fixed-box {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: lightgoldenrodyellow;
}

.sticky-box {
  position: sticky;
  top: 0;
  background-color: lightpink;
}

<div class="static-box">Static Box</div>
<div class="relative-box">Relative Box</div>
<div class="absolute-box">Absolute Box</div>
<div class="fixed-box">Fixed Box</div>
<div class="sticky-box">Sticky Box</div>

The <position> type allows developers to create complex layouts such as overlapping elements, sticky headers, floating menus, and tooltips. It is also frequently combined with the <display> type to control both the box model behavior and flow of elements, offering extensive flexibility in modern CSS design.

Syntax

<position> = [
  [ left | center | right ] || [ top | center | bottom ]
|
  [ left | center | right | <length-percentage> ]
  [ top | center | bottom | <length-percentage> ]?
|
  [ [ left | right ] <length-percentage> ] &&
  [ [ top | bottom ] <length-percentage> ]
]

Values

leftIs equivalent to a horizontal position of 0%.
rightIs equivalent to a horizontal position of 100%.
topIs equivalent to a vertical position of 0%.
bottomIs equivalent to a vertical position of 100%.
centerIs equivalent to position of 50% in the applicable direction.

Example

HTML

<div class="positions-demo">

  <h2>CSS position examples</h2>



  <div class="row">

    <div class="box static">

      <strong>static</strong>

      <div class="desc">Default flow (position: static)</div>

    </div>



    <div class="box relative">

      <strong>relative</strong>

      <div class="desc">Parent for positioned children</div>

      <div class="absolute-child">absolute</div>

    </div>



    <div class="box absolute-outside">

      <strong>absolute</strong>

      <div class="desc">Positioned relative to the viewport (no positioned ancestor)</div>

    </div>



    <div class="box fixed">

      <strong>fixed</strong>

      <div class="desc">Fixed to the viewport</div>

    </div>

  </div>



  <div class="scroll-area">

    <div class="sticky">sticky header (sticks to top)</div>

    <div class="long-content">

      <p>Scroll the page to see the sticky header and fixed box behavior.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae nibh sit amet augue viverra aliquet. Integer sit amet est sit amet urna viverra convallis.</p>

      <p>Curabitur non risus sed orci volutpat ultrices ac a nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>

      <p>Nulla facilisi. Sed sed lorem a augue finibus convallis. Phasellus volutpat, orci a fringilla auctor, lorem lorem gravida nibh, vitae aliquet nisl augue et nisl.</p>

      <p>Praesent a nibh ut purus volutpat posuere. Aliquam erat volutpat. Vivamus id cursus ligula.</p>

    </div>

  </div>

</div>

CSS

.positions-demo {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  max-width: 960px;
  margin: 40px auto;
  padding: 20px;
  box-sizing: border-box;
  color: #1f2937;
}

.row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.box {
  background: #f5f7fa;
  border: 1px solid #dfe6ec;
  border-radius: 8px;
  padding: 10px;
  width: 220px;
  height: 120px;
  box-sizing: border-box;
}

.relative {
  position: relative; /* establishes a positioning context for children */
  background: #e8f7ff;
}

.absolute-child {
  position: absolute; /* positioned relative to the nearest positioned ancestor (.relative) */
  bottom: 10px;
  right: 10px;
  background: #004e89;
  color: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
}

.absolute-outside {
  position: absolute; /* no positioned ancestor -> positioned relative to the viewport */
  top: 160px;
  right: 40px;
  background: #ffd4d4;
  border: 1px solid #ffb3b3;
  width: 220px;
  height: 120px;
  padding: 10px;
  box-sizing: border-box;
  z-index: 1;
}

.fixed {
  position: fixed; /* fixed to the viewport */
  bottom: 20px;
  right: 20px;
  width: 160px;
  height: 60px;
  background: #2b2b2b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.scroll-area {
  margin-top: 24px;
  border-top: 1px dashed #ccc;
  padding-top: 12px;
}

.sticky {
  position: sticky; /* will stick when reaching top: 0 */
  top: 0;
  background: #fff3bf;
  padding: 10px;
  border: 1px solid #ffd966;
  border-radius: 6px;
  font-weight: 600;
}

.long-content {
  height: 900px; /* create scrollable space so sticky behavior can be observed */
  padding-top: 12px;
}

.desc {
  font-size: 12px;
  color: #555;
  margin-top: 6px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS position data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.