Forem

hiro
hiro

Posted on โ€ข Edited on

3 2

[CSS design] I think about specifying z-index difficult to break

Summary

Defines the z-index value to be specified for each component.

Motivation

  • I want to avoid z-index conflicts
  • Want to clarify the reason for specifying z-index
  • Don't want to increase z-index each time more components are added

Prerequisites

Rules for z-index

  • Do not use z-index as much as possible.
  • Use z-index from 0 to 4.
  • As a rule, do not use negative numbers such as -1.

Layer Stack rules

  • Define the z-index value that a component should have on a layer (hierarchy) for each role.
  • Increase the z-index value as the layer stacks up.

Layer Stack 4 : z-index: 4.

Element to be placed on top in any state.

  • Modal
  • Drawer
  • Overlay

Layer Stack 3 : z-index: 3

Elements that are always placed on top.

An element that is always placed on top.

  • Global header (e.g., fixed header to follow)

Layer Stack 2 : z-index: 2.

  • Tooltips
  • Pop-overs
  • Floating buttons (e.g., arrow buttons for carousels, etc.)

Layer Stack 1 : z-index: 1.

Placed on top of an element that does not have a stack.

  • Badge

Define z-index.

:root {
  --layer-stack-1: 1;
  --layer-stack-2: 2;
  --layer-stack-3: 3;
  --layer-stack-4: 4;
}

.modal {
  z-index: var(--layer-stack-4);
}

.modal-in-modal {
  z-index: calc(var(--layer-stack-4) + 1);
}
Enter fullscreen mode Exit fullscreen mode

Rules for isolation

There may be a case where the z-index conflicts between components in the Layer Stack definition alone, resulting in unintended overlapping. In such a case, you can solve the problem by using isolation to generate stacking context in the root of the component.

.special-components {
  isolation: isolate; /* generate stacking context */
  position: absolute;
}

.special-components__item {
  position: absolute;
  z-index: 100;
}

.modal {
  position: absolute;
  z-index: var(--layer-stack-4);
}
Enter fullscreen mode Exit fullscreen mode

Basically, it is preferable to use an HTML structure with no problems with just a z-index specification, but there is a high possibility of unintended overlap with other components when a specification such as z-index: calc(var(--layer-stack-2) + 1); is used. It is preferable to specify isolation for the root of a component whose child elements have a z-index specification.

Incidentally, before the advent of isolation, there was a hack to generate stacking contexts by specifying transform without side-effects (e.g. transform: scale(1)).


Summary

  • Specify z-index according to Layer Stack rules.
  • Specify isolation: isolate for component root

Image of Timescale

๐Ÿš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsโ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post โ†’

Top comments (2)

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ โ€ข

This CSS property is the most challenging for me when I have just started learning css in the year 2022.

But after few projects I have understood the use and consept of the property. ๐Ÿ˜๐Ÿงž

Thanks for this deep explanation ๐Ÿ™

Collapse
 
hiro0218 profile image
hiro โ€ข

I'm very honored that my article helped you! ๐Ÿฅฐ

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

๐Ÿ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay