DEV Community

Huy Nguyen
Huy Nguyen

Posted on • Originally published at


Managing dynamic z-index in component-based UI architecture

This article is a response to an article published in Smashing Magazine recently that discusses the difficulties of managing z-index in a complex UI application.
Practically speaking, z-index determines the "stacking order" of a DOM element i.e. whether one element appears above another when their spatial extents overlap.
Despite this fairly straightforward functionality, z-index can be tricky to work with in practice.

One example that I frequently encounter while developing interactive graphs and charts is that of adjacent interactive DOM elements that have mutually overlapping hover tooltips.
For example, a graph that provides a hover tooltip for every data point can appear next to a legend that also has its own hover tooltip and we want either hover tooltip to be fully visible when they are shown.

Below is a live demonstration (with the code here).
The viewport is divided into 3 adjacent areas, labeled A, B and C and with different background-colors.
They each should respond to hover interactions by increasing their background-color's opacity and showing a tooltip that points toward their centers.

Because I believe that strong ownership my of content will lead to higher quality content, I host all my writings on my website. You can read the rest of this post here.

Top comments (0)

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!