Codectionary / Developer documentation / CSS

position Property

The position property controls how an element is positioned in the document. static is the default, following normal flow. relative positions an element relative to its normal position. absolute removes it from flow entirely, positioning it relative to its nearest positioned ancestor. fixed positions relative to the viewport, staying in place during scroll. sticky toggles between relative and fixed based on scroll position.

Syntax

position: static | relative | absolute | fixed | sticky;

Examples

relative and absolute Together

The most common pattern: a relatively-positioned parent containing an absolutely-positioned child.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-tile{padding:1rem;background:#fef3c7;color:#422006;border:1px solid #d97706}.preview-frame{border:1px dashed #94a3b8;padding:1rem;margin-block:1rem}.card{min-height:9rem}.badge{background:#166534;color:white;padding:.25rem .5rem}

.card {
  position: relative; /* establishes a positioning context for children */
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px; /* positioned relative to .card, not the page */
}
  1. position:relative establishes the card’s positioning reference without removing it from normal flow.
  2. The absolute badge uses top and right offsets from that card.
  3. Change an offset and compare the badge’s position against the card border.
HTML used by this example
<article class="card preview-frame"><span class="badge">New</span><h3>Positioned course notice</h3><p>The badge is positioned relative to this article.</p></article>

fixed for a Persistent Header

Keeping an element in place regardless of scrolling.

/* Demo setup: sizing, structure or neutral surfaces. */
.header{padding:1rem;background:#064e3b;color:white}.preview-long{height:140vh;padding-top:5rem}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
  1. The fixed header uses the sandbox viewport as its positioning reference.
  2. The tall content lets you scroll inside the preview while the header stays visible.
  3. Its fixed positioning does not extend outside the iframe into the documentation navigation.
HTML used by this example
<header class="header">Fixed inside this preview viewport</header><main class="preview-long"><h3>Scroll the preview</h3><p>The header remains at the top of the iframe, not the whole documentation page.</p></main>

sticky for a Sticky Section Heading

An element that scrolls normally until it hits a threshold, then sticks.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-scroll{height:14rem;overflow:auto;border:1px solid #94a3b8}.preview-long{height:30rem}.section-heading{color:#172b4d;padding:.75rem}

.section-heading {
  position: sticky;
  top: 0; /* sticks once it reaches 0px from the top of the scroll container */
  background: white;
}
  1. The section is an actual scrolling container.
  2. The heading sticks when its top threshold is reached, while staying constrained by the section.
  3. Scroll the region to observe the difference from a permanently fixed header.
HTML used by this example
<section class="preview-scroll"><h3 class="section-heading">Sticky lesson heading</h3><p class="preview-long">Scroll inside this lesson region.</p></section>

Parameters and values

  • static (keyword): Default - normal document flow, top/left/etc have no effect
  • relative (keyword): Offset from its normal position, still occupies original space
  • absolute (keyword): Removed from flow, positioned relative to nearest positioned ancestor
  • fixed (keyword): Positioned relative to the viewport, stays put while scrolling
  • sticky (keyword): Relative until a scroll threshold, then behaves like fixed

Best practices

  • Give an absolutely-positioned element's closest meaningful ancestor position: relative, or it will position relative to the whole page instead
  • Use sticky for section headers, table headers, or sidebars that should follow scrolling within a bound, not for full free-floating overlays
  • Remember absolutely and fixed-positioned elements are removed from normal flow - other elements act as if they are not there
  • Combine position: fixed with a high z-index for overlays and modals to ensure they render above other content

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading