What is stacking context?

A layer grouping that controls child stacking.

Can z-index be negative?

Yes, to place elements behind others.

CSS Z-Index - Learn HTML | Revochamp

Name: CSS Z-Index
Availability: InStock
Author: Revochamp

What is Z-Index?

The z-index property controls the vertical stacking order of positioned elements (which element appears on top).

Basic Example

CSSRead-only

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

.box2 {
  position: absolute;
  z-index: 2;
}

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

.box2 {
  position: absolute;
  z-index: 2;
}

Higher Value = On Top

Elements with higher z-index values appear above elements with lower values.

Position Requirement

z-index works only on positioned elements (position: relative, absolute, fixed, sticky).

CSSRead-only

div {
  position: relative;
  z-index: 10;
}

div {
  position: relative;
  z-index: 10;
}

Default Stacking

Without z-index, elements stack based on their order in the HTML (later elements appear on top).

Negative Z-Index

CSSRead-only

div {
  position: relative;
  z-index: -1;
}

div {
  position: relative;
  z-index: -1;
}

Stacking Context

A stacking context is formed when an element has a position and z-index, isolating its children from other elements.

Example

CSSRead-only

.parent {
  position: relative;
  z-index: 1;
}

.child {
  position: absolute;
  z-index: 999;
}

.parent {
  position: relative;
  z-index: 1;
}

.child {
  position: absolute;
  z-index: 999;
}

Common Use Cases

Modals and popups
Dropdown menus
Tooltips
Fixed headers and overlays

Best Practices

Use minimal z-index values
Maintain a z-index scale (e.g., 1–10–100)
Avoid excessive stacking levels
Understand stacking context before debugging

Common Mistakes

Using z-index without position
Confusion due to stacking context
Overusing large values (9999)
Unexpected overlap issues

Conclusion

CSS z-index controls element layering. Understanding positioning and stacking context is key to mastering it.

What is Z-Index?

The z-index property controls the vertical stacking order of positioned elements (which element appears on top).

Basic Example

CSSRead-only

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

.box2 {
  position: absolute;
  z-index: 2;
}

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

.box2 {
  position: absolute;
  z-index: 2;
}

Higher Value = On Top

Elements with higher z-index values appear above elements with lower values.

Position Requirement

z-index works only on positioned elements (position: relative, absolute, fixed, sticky).

CSSRead-only

div {
  position: relative;
  z-index: 10;
}

div {
  position: relative;
  z-index: 10;
}

Default Stacking

Without z-index, elements stack based on their order in the HTML (later elements appear on top).

Negative Z-Index

CSSRead-only

div {
  position: relative;
  z-index: -1;
}

div {
  position: relative;
  z-index: -1;
}

Stacking Context

A stacking context is formed when an element has a position and z-index, isolating its children from other elements.

Example

CSSRead-only

.parent {
  position: relative;
  z-index: 1;
}

.child {
  position: absolute;
  z-index: 999;
}

.parent {
  position: relative;
  z-index: 1;
}

.child {
  position: absolute;
  z-index: 999;
}

Common Use Cases

Modals and popups
Dropdown menus
Tooltips
Fixed headers and overlays

Best Practices

Use minimal z-index values
Maintain a z-index scale (e.g., 1–10–100)
Avoid excessive stacking levels
Understand stacking context before debugging

Common Mistakes

Using z-index without position
Confusion due to stacking context
Overusing large values (9999)
Unexpected overlap issues

Conclusion

CSS z-index controls element layering. Understanding positioning and stacking context is key to mastering it.

CSS Z-Index

CSS Z-Index

What is Z-Index?

Basic Example

Higher Value = On Top

Position Requirement

Default Stacking

Negative Z-Index

Stacking Context

Example

Common Use Cases

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?

CSS Z-Index

CSS Z-Index

What is Z-Index?

Basic Example

Higher Value = On Top

Position Requirement

Default Stacking

Negative Z-Index

Stacking Context

Example

Common Use Cases

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?