# z-index Published articles for z-index. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## How to Audit and Organize CSS z-index Values and Stacking Contexts DevFeed: [How to Audit and Organize CSS z-index Values and Stacking Contexts]() Original publisher: [Read original article]() Author: Jean-Jacques Royneau Published: 2024-11-05T10:06:48Z Content type: tutorial Language: en Sources: [JobTeaser]() Topics: [CSS](), [Front end](), [modern web development]() Tags: [audit](), [bugs](), [cleanup](), [css](), [display](), [properties](), [stacking-context](), [z-index]() ### AI overview This article describes auditing z-index declarations, centralizing values with CSS custom properties, and reducing unnecessary z-indexes by accounting for stacking contexts and natural DOM order. ### Source excerpt Managing z-index is a classic challenge for front-end developers. As a project grows, display conflicts and bugs related to z-index can quickly turn into serious headaches. I recently took some time to clean up the z-indexes in one of our projects. In this article, I'll share the approach I used for this cleanup (while also laying the foundation for keeping things manageable in the long run). 1. Analyzing the existing z-indexes The first step was to perform a thorough audit of all the z-index declarations in the project. This gave me an overview of how many z-indexes we had and what values were being used. Here's what I found: - August 2023: 57 declarations with 8 distinct values. - February 2024: 87 declarations with 19 distinct values. This evolution showed me that the use of z-indexes had increased significantly. And there was no reason to believe it would stop. With that in mind, my goal became to centralize and standardize these values. 2. Centralizing z-indexes with CSS Custom Properties I centralized all the z-index values in a single file using CSS custom properties. This allowed me to have an overview of the different layers of elements on the page, helping me get a (slightly) clearer picture of the task ahead. If you'd like to get an idea (or maybe scare yourself a bit), here's what that first file looked like: :root { - z-index-second-basement: -2; - z-index-basement: -1; - z-index-ground: 0; - z-index-floor: 1; - z-index-second-floor: 2; - z-index-third-floor: 3; - z-index-job-ads-secondary-filters--selects: 10; - z-index-job-ads-results-sort: 10; - z-index-job-ads-primary-filters: 20; - z-index-fo-header: 30; - z-index-above-fo-header: 31; - z-index-fo-header--dropdowns: 100; - z-index-career-center--login-modal--autocomplete-list: 99; - z-index-bo-drawer-backdrop: 999; - z-index-bo-drawer: 1000; - z-index-feature-env-switcher: 9999; - z-index-notifications-panel: 10000; - z-index-msw-tools-panel--open-button: 99999; - z-index-msw-tools-panel: 999999; } ## How to set a React Component or dom element as a background image DevFeed: [How to set a React Component or dom element as a background image]() Original publisher: [Read original article]() Published: 2021-08-12T00:00:00Z Content type: tutorial Language: en Sources: [HackerEarth]() Topics: [React](), [Document Object Model (DOM)](), [Code](), [Front end]() Tags: [code](), [container](), [frontend](), [how-to](), [react](), [react-component](), [z-index]() ### AI overview A step-by-step tutorial for displaying a React Component as a background-like layer behind a textarea. It uses a relatively positioned wrapper, an absolutely positioned component, a transparent textarea background, a negative z-index, and disabled pointer events on the component. ### Source excerpt During my internship at HackerEarth, I faced an interesting problem. This blog is about that and how I solved it. Problem: To set a background image to the textarea element. My initial impression on seeing the design was that it would be easy. I thought it's a image but after exploring the code I came to know that it's not an image that we have to show as background instead, it's a React Component. So now what? To solve this problem we need to think from scratch. Solution: First, we will think about how to do it and then will implement it step by step. 1. Think From Scratch In this example, as you can see the content in the body element overlap the background-image. To solve this problem we just need to overlap the React Component with the textarea. 2. Implementation Create a textarea and React Component which we are going to use. The text area is to the left and to the right is the React Component which we are going to set as a background image in the textarea element. Steps: 1.Create a div which wrap textarea and React Component. Set the div position: relative and React Component position: absolute, top: 0 & left: 0.
// position: relative