CSS Positioning

Position Values

position: static (Default)

Normal document flow:

.element {
  position: static;
  /* top, right, bottom, left have no effect */
}

position: relative

Relative to normal position, keeps space in flow:

.element {
  position: relative;
  top: 20px;   /* Moves 20px down */
  left: 10px;  /* Moves 10px right */
}
/* Element keeps its original space */

position: absolute

Relative to nearest positioned ancestor (or body):

.parent {
  position: relative; /* Positioned ancestor */
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}

Key points:

• Removed from document flow
• No space reserved
• Siblings collapse into its space

position: fixed

Relative to the viewport:

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

Key points:

• Always stays in view
• Removed from document flow
• Doesn't scroll with page

position: sticky

Hybrid of relative and fixed:

.header {
  position: sticky;
  top: 0;
}
/* Sticks when scrolling, but only within parent */

Key points:

• Relative until scroll threshold
• Then becomes fixed
• Parent must have scroll overflow

Z-index

Controls stacking order of positioned elements.

Basic Usage

.box-1 {
  position: absolute;
  z-index: 1;
}

.box-2 {
  position: absolute;
  z-index: 2; /* On top */
}

Stacking Context

A stacking context is created when:

1. position is not static AND z-index is set
2. opacity < 1
3. transform is applied
4. filter is applied
5. isolation: isolate is set

.parent {
  position: relative;
  z-index: 1; /* Creates stacking context */
}

.parent .child {
  z-index: 999; /* Only within parent's context */
}

Stacking Order (bottom to top)

1. Background/border of root element
2. Descendant elements with negative z-index
3. Non-positioned block elements
4. Non-positioned float elements
5. Non-positioned inline elements
6. Descendant elements with z-index: 0 or auto
7. Descendant elements with positive z-index

Common Gotcha

/* This WON'T work as expected */
.parent { z-index: 1; }
.parent .child { z-index: 1000; }

/* The child can't escape parent's stacking context */

Practical Positioning

Sticky Header

.header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 100;
}

Tooltip

.tooltip-trigger {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

Overlay/Modal

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

Centering with Absolute

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Fixed Sidebar

.sidebar {
  position: fixed;
  left: 0;
  top: 60px;
  width: 250px;
  height: calc(100vh - 60px);
}

.main-content {
  margin-left: 250px;
}

Back to Top Button

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 99;
}