CSS Positioning Tutorial

Static Positioning (Default)

The default positioning. Elements appear in the normal document flow. position: static;

Static

What is the default position value for HTML elements?

static

relative

absolute

fixed

Relative Positioning

Positioned relative to its normal position. position: relative; top: 40px; left: 40px;

Relative

How is an element positioned relative to its normal position?

relative to the viewport

relative to its normal position

relative to its nearest positioned ancestor

relative to the document flow

Absolute Positioning

Positioned relative to its nearest positioned ancestor. position: absolute; bottom: 20px; right: 20px;

Absolute

Relative to what is an absolutely positioned element positioned?

the viewport

its normal position

its nearest positioned ancestor

the document flow

Fixed Positioning

Positioned relative to the viewport, stays in place while scrolling. position: fixed; top: 20px; right: 20px;

Fixed

What is the behavior of a fixed-positioned element during scrolling?

It scrolls with the page

It stays fixed in the viewport

It's relative to its nearest ancestor

It's static

Sticky Positioning

Acts like relative positioning until a scroll threshold, then becomes fixed. position: sticky; top: 20px;

Sticky

Describe the behavior of a sticky positioned element.

Always fixed to the viewport

Always relative to its parent

Behaves like relative until scroll threshold, then fixed

Always static

Z-Index and Stacking Order

The z-index property controls the vertical stacking order of elements that overlap. It only works on positioned elements (relative, absolute, fixed, or sticky).

Key Points:

Higher z-index values appear on top
Only works with positioned elements
Default z-index is auto (0)
Can be positive or negative numbers

In this example, we have three boxes with different z-index values:
Red box: z-index: 1;
Blue box: z-index: 2;
Green box: z-index: 3;

z-index: 1

z-index: 2

z-index: 3

Which property controls the stacking order of overlapping elements?

position

display

z-index

overflow

Downloadable Resources

Access these helpful resources to aid your learning:

Printable Cheat Sheet CSS Positioning Cheatsheet Static Position Example Relative Position Example Absolute Position Example Fixed Position Example Sticky Position Example

Interactive Animation Demo

Click the buttons below to see how different positioning affects the layout flow. Watch how other elements adjust their positions when Block 2 is positioned absolutely. Use the z-index slider to control the stacking order of Block 2 when using relative positioning, and observe how it can move behind or in front of Block 3.

Block 1

Block 2

Block 3

Block 4

Block 5

Block 6

Notice: When Block 2 is set to absolute positioning, Blocks 3-6 move up to fill the space, demonstrating how elements are removed from the normal document flow. When using relative positioning, try adjusting the z-index to see how Block 2 can move behind or in front of Block 3 (which has a z-index of 2).