CSS <position> Data Type - Playground Example

<!DOCTYPE html><html><head><style type="text/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;
}</style></head><body><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></body></html>