Technique C44:Using CSS z-index to un-obscure focused content

Example 1: focusable content with CSS background and position properties

This example is modelled on a "quick escape" tool which can at times obscure a sidebar navigation area. It sets a z-index value for HTML <a> links within the navigation sidebar.

For this example, we will say the "quick escape" safety feature has a z-index value of "1", and that it's a controlled value that is unlikely to change. Because of the stability of the z-index value, a relatively low value of "2" is enough to achieve the desired effect and un-obscure focused content.

.sidebar-navigation a:focus {
  z-index: 2;
}

Example 2: Focusable content which lacks a CSS background property

This example is modelled on a chatbot window which pops over body content, potentially obscuring multiple focusable user interface components. The body content area has a white background. It expands on Example 1, demonstrating how to un-obscure focusable content when some of the content may lack a pre-set background. A distinct background property which provides good contrast with any text or image within the focusable content is essential to the success of this technique, in order to ensure the focused content is perceivable once unobscured.

For this example, we will say the current highest z-index value on the page is "9999", but that it's an uncontrolled value introduced by an external tool or plugin (in this case, a third-party chatbot pop-over). Because of the instability of the z-index values on the page, a universally-high value of "infinity" is one method to consistently achieve the desired effect.

.body-content :focus {
  z-index: calc(infinity);
  background-color: white;
}

Example 3: Focusable content which lacks a CSS position property

This example is modelled on a cookie consent banner which, at times, covers up portions of the footer. The footer content area has a "white" background.

This expands on "Example 1", demonstrating how to un-obscure focusable content when some of the content may lack a CSS position. Great care should be taken when setting a position value for an entire section of content, such as for all elements within a footer. This may override existing position properties. Setting a position value is essential to the success of this technique, because z-index only affects positioned elements.

For this example, we will say the current highest z-index value on the page is "1000000", and that it's an uncontrolled value introduced by an external tool or plugin (in this case, a third-party cookie consent banner). Because of the instability of the z-index values on the page, a universally-high value of "infinity" is one method to consistently achieve the desired effect. Additionally, in this example, some of the footer's focusable content already has set z-index values, which will need to be overridden.

footer :focus {
  z-index: calc(infinity) !important;
  position: relative;
}

Example 4: Focusable content which lacks consistent CSS background and position properties

This example is modelled on a large menu that doesn't close when unfocused. The menu pops over header links, as well as body and sidebar content. It can potentially obscure a large variety of focusable user interface components. The obscured content areas include several elements which lack a position or background property, as well as some elements with specific background and z-index values.

For this example, we will say the menu pop-over has a z-index value of "80", and that it's a controlled value that is unlikely to change. However, since the focusable content in this example has a variety of background and z-index values, care must be taken when setting those properties.

header a:focus {
  z-index: 81 !important;
  position: relative;
  background-color: green;
}
.body-content :focus {
  z-index: 81 !important;
  position: relative;
  background-color: white;
}
.sidebar-navigation :focus {
  z-index: 81 !important;
  position: relative;
  background-color: pink;
}