position

/* static: normal flow (initial value). top/left etc. have no effect */
div.test { position: static;}

/* relative: offset from the element's normal flow position */
div.test2 { position: relative; top: 10px; left: 20px;}

/* absolute: positioned relative to the nearest positioned ancestor */
.parent { position: relative;}
.child { position: absolute; top: 0; right: 0;}

/* fixed: fixed relative to the viewport (stays put when scrolling) */
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100;}

/* sticky: switches between relative and fixed based on scroll position */
.table-header { position: sticky; top: 0; background: #fff;}

/* Center an element with absolute positioning */
.overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

The elements with 'position' specified below have 'opacity: 0.7' applied to make them semi-transparent.

<div style="position: static; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">This is a div element with a width of 300px and height of 300px. 'position: static' is specified.</div>
<p style="background-color: #0f9">This is a p element.</p>

<div style="position: relative; top: 0; left: 50px; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">This is a div element with a width of 300px and height of 300px. 'position: relative', 'top: 0', and 'left: 50px' are specified.</div>
<p style="background-color: #0f9">This is a p element. The preceding element with 'position: relative' retains its space in the normal document flow even when moved, so this p element is displayed in its original position without being shifted.</p>

<div style="position: absolute; top: 0; left: 50px; background-color: #ff0; width: 300px; height: 100px; padding-top: 200px; opacity: 0.7;">This is a div element with a width of 300px and height of 300px. 'position: absolute', 'top: 0', and 'left: 50px' are specified.</div>
<p style="background-color: #0f9">This is a p element. The space the preceding element with 'position: absolute' would have occupied is not preserved, so this p element is shifted up to fill the gap.</p>

For a sample of 'position: fixed', see here.

/* Header pinned to the top of the viewport */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #2c3e50;
  color: #fff;
  padding: 12px 20px;
  z-index: 1000; /* Render in front of other elements */
}
/* Add padding to body for the header height */
body { padding-top: 60px; }

/* Modal overlay: centered on screen */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
}

/* Sticky sidebar: follows the scroll */
.sidebar {
  position: sticky;
  top: 80px; /* header height + margin */
  align-self: start; /* Align to top in Flexbox/Grid */
}

/* Card: position a small label at the top-right corner */
.card {
  position: relative; /* Becomes the reference for absolute children */
}
.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #e74c3c;
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  font-size: 12px;
}

View sample page

The 'z-index' property only works on elements whose 'position' is set to a value other than 'static'. Higher values are rendered in front of lower values.

/* z-index only works when position is not static */
.behind { position: relative; z-index: 1; }
.front { position: relative; z-index: 10; } /* Rendered in front */

/* Common layer structure */
.content { position: relative; z-index: 1; }
.dropdown { position: absolute; z-index: 100; }
.modal { position: fixed;    z-index: 1000; }
.toast { position: fixed;    z-index: 2000; }

Using CSS custom properties for layer management improves maintainability.

:root {
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
  --z-toast: 2000;
}
.modal { position: fixed; z-index: var(--z-modal); }

View sample page

Common mistake 1: missing position on parent

If you forget to set position on the parent, the child's absolute positioning will fall back to the window instead of the parent.

.parent { /* position: relative; is needed! */ }
.child { position: absolute; top: 0; right: 0; }
/* → Not positioned relative to parent; flies to the top-right of the page. */

Common mistake 2: overflow disabling sticky

sticky does not work when a parent has overflow: hidden, auto, or scroll.

.wrapper { overflow: hidden; }
.header { position: sticky; top: 0; }
/* → Will not stick on scroll. */

Common mistake 3: transform changing fixed reference

Inside an ancestor with transform set, fixed behaves relative to that ancestor instead of the window.

.animated-wrapper { transform: translateX(0); }
.fixed-child { position: fixed; top: 0; }
/* → Positioned relative to .animated-wrapper, not the window. */

View sample page

Changes the positioning method of an element.

When 'static' is specified, the element is placed according to the normal document flow. The 'top', 'right', 'bottom', and 'left' properties are all ignored. This is the initial value.

When 'relative' is specified, the element can be positioned relative to its normal position in the document flow. The 'top', 'right', 'bottom', and 'left' properties specify the offset from the element's normal position. The space that would have been occupied by the 'relative' element in the normal flow is preserved, so subsequent elements are displayed in their original positions without being shifted.

<div style="position: relative; top: 100px; left: 50px; background-color: #ff0; width: 300px; height: 300px; opacity: 0.7;">This is a div element with a width of 300px and height of 300px. 'position: relative', 'top: 100px', and 'left: 50px' are specified.</div>
<p style="background-color: #0f9">This is a p element. The preceding element with 'position: relative' retains its space in the normal document flow even when moved, so this p element is displayed in its original position without being shifted.</p>

When 'absolute' is specified and an ancestor element with a 'position' value other than 'static' exists, the element is positioned relative to the nearest such ancestor. If all ancestors have 'position: static', the element is positioned relative to the window. The 'top', 'right', 'bottom', and 'left' properties specify the distance from each edge of the containing block. The space that would have been occupied by the 'absolute' element in the normal flow is not preserved, so subsequent elements shift up to fill the gap.

<div style="position: absolute; top: 0; left: 50px; background-color: #ff0; width: 300px; height: 100px; padding-top: 200px; opacity: 0.7;">This is a div element with a width of 300px and height of 300px. 'position: absolute', 'top: 0', and 'left: 50px' are specified.</div>
<p style="background-color: #0f9">This is a p element. The space the preceding element with 'position: absolute' would have occupied is not preserved, so this p element is shifted up to fill the gap.</p>

When 'fixed' is specified, the element is positioned relative to the top-left corner of the window. It stays fixed even when scrolling. The 'top', 'right', 'bottom', and 'left' properties specify the distance from each edge of the window. The space that would have been occupied by the 'fixed' element in the normal flow is not preserved, so subsequent elements shift up to fill the gap.

For a sample of 'position: fixed', see here.

When child elements with 'position: absolute' or 'fixed' exist, the parent element cannot include their height in its own height calculation. This is because elements with 'position: absolute' or 'fixed' are completely removed from the normal document flow. To have the parent automatically calculate this height, use JavaScript.

Also note that 'margin' collapsing does not occur for elements with 'position: absolute' or 'fixed'.

※ The 'position' property is also explained in detail here.

※ Version data is based on MDN.