CSS Position, z-index and Float Interview Questions

static (the default), relative (offset from its normal spot, space kept), absolute (out of flow, placed against the nearest positioned ancestor), fixed (out of flow, placed against the viewport) and sticky (in flow until it reaches its offset in its scroll container, then sticks). Anything but static counts as positioned. More in position.

Out of the normal flow, against its containing block: the nearest ancestor whose position is not static, or one with a transform, filter or contain: paint. With none, it uses the initial containing block. Hence relative parent, absolute child:

<style>
  .card { position: relative; width: 220px; padding: 16px; background: #f3f4f6; border-radius: 8px; }
  .badge { position: absolute; top: -8px; right: -8px; background: crimson; color: white; border-radius: 999px; padding: 2px 8px; font-size: 12px; }
</style>
<div class="card">
  Notifications
  <span class="badge">3</span>
</div>

position: relative alone does not move the parent; it only makes it the reference.

It sticks within its nearest scrolling ancestor, and only while its parent is on screen. Usual causes:

1. No top (or other offset).
2. An ancestor has overflow: hidden, auto or scroll and becomes the scroll container.
3. The parent is no taller than the sticky element.
4. In a flex row it stretches to full height; add align-self: flex-start.

<style>
  .scroller { height: 160px; overflow: auto; border: 1px solid #9ca3af; }
  .head { position: sticky; top: 0; background: #2563eb; color: white; padding: 6px; }
  .scroller p { margin: 0; padding: 10px; border-bottom: 1px solid #e5e7eb; }
</style>
<div class="scroller">
  <div class="head">Sticky header: scroll this box</div>
  <p>Row 1</p><p>Row 2</p><p>Row 3</p><p>Row 4</p><p>Row 5</p><p>Row 6</p><p>Row 7</p>
</div>

Because z-index only competes inside one stacking context: if an ancestor makes one with a low z-index, nothing inside it can rise above that ancestor's siblings.

<style>
  div { color: white; padding: 10px; }
  .parent { position: relative; z-index: 1; background: #93c5fd; width: 220px; }
  .child { position: relative; z-index: 999; background: #2563eb; width: 160px; }
  .sibling { position: relative; z-index: 2; background: #f97316; width: 200px; margin: -30px 0 0 60px; }
</style>
<div class="parent"><div class="child">child, z-index: 999</div></div>
<div class="sibling">sibling, z-index: 2</div>

The real contest is parent (1) against sibling (2). Stacking contexts come from z-index on a positioned, flex or grid item, position: fixed or sticky, opacity below 1, transform, filter and isolation: isolate. More in z-index.

float pushes an element to one side and lets text wrap around it. Floats leave the flow, so a parent holding only floats collapses to zero height; a clearfix makes it contain them.

<style>
  .box { border: 2px solid #2563eb; margin-bottom: 30px; }
  .img { float: left; width: 80px; height: 80px; background: #f97316; margin-right: 8px; }
  .contained { display: flow-root; }
</style>
<div class="box contained"><div class="img"></div>With display: flow-root the box grows to contain the float.</div>
<div class="box"><div class="img"></div>Without it the border ignores the float.</div>

The old clearfix was a ::after with clear: both; display: flow-root now does it in one line. More in float.

An ancestor with transform (even translateX(0)), filter, backdrop-filter, perspective, contain: paint, or will-change for one of those, becomes the containing block for fixed descendants, which then stick to it instead of the viewport.

<style>
  .panel { height: 120px; border: 2px dashed #9ca3af; margin-bottom: 8px; padding: 6px; }
  .moved { transform: translateX(0); }
  .toast { position: fixed; bottom: 8px; left: 8px; background: #111827; color: white; padding: 6px 10px; }
</style>
<div class="panel moved">This box has a transform, so its toast is trapped at the box's bottom left.
  <div class="toast">trapped</div>
</div>
<div class="panel">This box has none, so its toast is fixed to the bottom left of the preview window.
  <div class="toast">viewport</div>
</div>

Render modals at the end of body (a React portal), or use <dialog> with showModal(), which draws in the top layer.

fixed takes the element out of the flow and pins it to the viewport from the start, so content slides under it and you usually add padding to make room. sticky stays in the flow and keeps its space; it scrolls normally until it reaches its offset (top: 0), then sticks, and only while its parent is on screen. Use fixed for a floating chat button, sticky for a table header or section heading. More in position.

Give the parent position: relative and the child position: absolute; inset: 0. inset is shorthand for top, right, bottom and left, so all four edges stick to the parent's padding box and the child stretches with no width or height.

<style>
  .card { position: relative; width: 240px; height: 100px; padding: 12px;
          background: #2563eb; color: white; border-radius: 8px; }
  .overlay { position: absolute; inset: 0; display: grid; place-items: center;
             background: rgb(0 0 0 / 0.55); border-radius: inherit; }
</style>
<div class="card">
  Card content
  <div class="overlay">Loading...</div>
</div>

With a fixed width and height, inset: 0 plus margin: auto centers the child instead.

No. z-index applies only to positioned elements (anything but static) and to flex and grid items, so on a plain block it is ignored. Add position: relative, which does not move the element.

<style>
  .pair { margin-bottom: 16px; }
  .box { width: 160px; height: 50px; color: white; padding: 6px; }
  .a { background: #2563eb; z-index: 10; }
  .b { background: #f97316; margin: -30px 0 0 40px; position: relative; z-index: 1; }
  .fixed .a { position: relative; }
</style>
<div class="pair"><div class="box a">z-index: 10, static</div><div class="box b">z-index: 1</div></div>
<div class="pair fixed"><div class="box a">z-index: 10, relative</div><div class="box b">z-index: 1</div></div>

In the first pair the orange box covers the blue one despite its lower number.

Both take the element out of the normal flow, but a float still pushes on its neighbors: text and inline content wrap around it. An absolutely positioned element is removed completely: nothing wraps around it, the content behaves as if it were not there, and you place it with offsets against its containing block. Use float to wrap text around an image, absolute for overlays and badges, and neither for page layout, which is a job for Flexbox and Grid.