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)