Notes/CSS3/Positioning & Z-Index

beginner9 min read

Positioning & Z-Index

Master element layout positioning: understand static, relative, absolute, fixed, and sticky types, alongside z-index stacking layers.

1. Position: Static (The Default)

Elements appear one after another in the normal document flow. Top, Left, Right, and Bottom have no effect here.

styles.css

1.box {
2  position: static; /* Default behavior */
3}

Interactive Positioning & Z-Index Visualizer

position: relative

Select a positioning mode and adjust offset values to observe how the target element behaves relative to its container and viewport.

position

top (20px)

left (30px)

z-index (10)

.target-element {
  position: relative;
  top: 20px;
  left: 30px;
  z-index: 10;
}

Scrollable Viewport Container (Scroll down to test sticky/fixed)

Static Block Element #1 (In normal document flow)

Target Box (relative)

z: 10

Static Block Element #2 (Normal document flow)

Keep scrolling down to see position: sticky lock at top: 20px!

2. Position: Relative (The Ghost)

The element moves relative to its original position. Crucially, the "ghost" of where it used to be stays behind, preserving the space.

(Original Space Kept)

I moved! Top: 30px, Left: 50px

styles.css

1.relative-box {
2  position: relative;
3  top: 30px;  /* Push down from original spot */
4  left: 50px; /* Push right from original spot */
5}

3. Position: Absolute (The Pin)

The element is removed from the normal flow (no ghost space). It positions itself relative to the nearest ancestor that has a position (usually relative).

Parent (position: relative) is the demo area

Other text in the parent ignores the red box because the red box is "floating" above everything.

Absolute Child Top: 20px Right: 20px

styles.css

1.parent {
2  position: relative; /* Defines the coordinate system */
3}
4 
5.child {
6  position: absolute;
7  top: 20px;
8  right: 20px;
9}

4. Position: Fixed (The Sticker)

Fixed elements stay in the same spot on the screen (the viewport), even when you scroll the page.

Fixed elements remain locked in their viewport coordinates while scrolling. In real websites this is used for sticky navigation headers and chat bubbles.

styles.css

1.fixed-box {
2  position: fixed;
3  bottom: 20px;
4  right: 20px;
5}

5. Position: Sticky (The Hybrid)

Behaves like relative until you scroll past a certain point, then it becomes fixed. Scroll inside the demo box below to see it stick.

Scroll inside this box!

I am Sticky (Top: 0)

Notice the header stays at the top? It sticks once it hits top: 0. Keep scrolling... Almost there... End of content.

styles.css

1.sticky-header {
2  position: sticky;
3  top: 0; /* Stick when it hits the top edge */
4}

6. Z-Index (The Stack)

Controls the vertical stacking order. Higher numbers are closer to the user.

Three overlapping cards

Z-Index: 1 (Bottom)

Z-Index: 2 (Middle)

Z-Index: 3 (Top)

styles.css

1.yellow { z-index: 1; }
2.orange { z-index: 2; }
3.red    { z-index: 3; } /* Wins! */

Note: Z-index only works if the element has a position (relative, absolute, fixed, or sticky). It does not work on static elements.

Key Takeaways

1.position: static is the default flow where directional values (top/left) have no effect.
2.position: relative moves elements relative to their original position, keeping the original space reserved.
3.position: absolute removes elements from page flow and positions them relative to the nearest positioned parent.
4.position: fixed anchors elements relative to the viewport window so they remain in place during scroll.
5.position: sticky acts as relative until scrolling past a threshold, then locks in place like fixed.
6.z-index controls overlapping stack layers; it only applies to positioned elements (non-static).

Width, Height & Display CSS Flexbox Layout

Notes/CSS3/Positioning & Z-Index

beginner9 min read

Positioning & Z-Index

Master element layout positioning: understand static, relative, absolute, fixed, and sticky types, alongside z-index stacking layers.

1. Position: Static (The Default)

Elements appear one after another in the normal document flow. Top, Left, Right, and Bottom have no effect here.

styles.css

1.box {
2  position: static; /* Default behavior */
3}

Interactive Positioning & Z-Index Visualizer

position: relative

Select a positioning mode and adjust offset values to observe how the target element behaves relative to its container and viewport.

position

top (20px)

left (30px)

z-index (10)

.target-element {
  position: relative;
  top: 20px;
  left: 30px;
  z-index: 10;
}

Scrollable Viewport Container (Scroll down to test sticky/fixed)

Static Block Element #1 (In normal document flow)

Target Box (relative)

z: 10

Static Block Element #2 (Normal document flow)

Keep scrolling down to see position: sticky lock at top: 20px!

2. Position: Relative (The Ghost)

The element moves relative to its original position. Crucially, the "ghost" of where it used to be stays behind, preserving the space.

(Original Space Kept)

I moved! Top: 30px, Left: 50px

styles.css

1.relative-box {
2  position: relative;
3  top: 30px;  /* Push down from original spot */
4  left: 50px; /* Push right from original spot */
5}

3. Position: Absolute (The Pin)

The element is removed from the normal flow (no ghost space). It positions itself relative to the nearest ancestor that has a position (usually relative).

Parent (position: relative) is the demo area

Other text in the parent ignores the red box because the red box is "floating" above everything.

Absolute Child Top: 20px Right: 20px

styles.css

1.parent {
2  position: relative; /* Defines the coordinate system */
3}
4 
5.child {
6  position: absolute;
7  top: 20px;
8  right: 20px;
9}

4. Position: Fixed (The Sticker)

Fixed elements stay in the same spot on the screen (the viewport), even when you scroll the page.

Fixed elements remain locked in their viewport coordinates while scrolling. In real websites this is used for sticky navigation headers and chat bubbles.

styles.css

1.fixed-box {
2  position: fixed;
3  bottom: 20px;
4  right: 20px;
5}

5. Position: Sticky (The Hybrid)

Behaves like relative until you scroll past a certain point, then it becomes fixed. Scroll inside the demo box below to see it stick.

Scroll inside this box!

I am Sticky (Top: 0)

Notice the header stays at the top? It sticks once it hits top: 0. Keep scrolling... Almost there... End of content.

styles.css

1.sticky-header {
2  position: sticky;
3  top: 0; /* Stick when it hits the top edge */
4}

6. Z-Index (The Stack)

Controls the vertical stacking order. Higher numbers are closer to the user.

Three overlapping cards

Z-Index: 1 (Bottom)

Z-Index: 2 (Middle)

Z-Index: 3 (Top)

styles.css

1.yellow { z-index: 1; }
2.orange { z-index: 2; }
3.red    { z-index: 3; } /* Wins! */

Note: Z-index only works if the element has a position (relative, absolute, fixed, or sticky). It does not work on static elements.

Key Takeaways

1.position: static is the default flow where directional values (top/left) have no effect.
2.position: relative moves elements relative to their original position, keeping the original space reserved.
3.position: absolute removes elements from page flow and positions them relative to the nearest positioned parent.
4.position: fixed anchors elements relative to the viewport window so they remain in place during scroll.
5.position: sticky acts as relative until scrolling past a threshold, then locks in place like fixed.
6.z-index controls overlapping stack layers; it only applies to positioned elements (non-static).

Width, Height & Display CSS Flexbox Layout