This content originally appeared on Bits and Pieces - Medium and was authored by Nethmi Wijesinghe
Top Layer vs Z-Index for Frontend UI Dialogs
How to make a dialog appear on top of an element even when its z-index is the highest
Have you ever wanted to create a frontend dialog box but struggled to keep it above the other elements? Well, the native dialog element in HTML could just be the perfect solution for that.
However, many developers continue to use the z-index property, which can lead to unexpected complications. Hence, this article will discuss the top layer promoted dialog element and how it resolves the issues with the CSS z-index property.
CSS z-index Property
Most of the time, CSS is concerned with two-dimensional styling and places HTML elements in horizontal or vertical directions.
However, you can use the CSS z-index property to define a custom stacking order of elements along an imaginary z-axis.
The value of the z-index should be an integer (negative, zero, or positive) value within the range of ±2147483647.
An element with a higher z-index is positioned in front of a component with a smaller z-index value. For example, a dialog with a z-index of 2 appears on top of a dialog with a z-index of 1.
Let’s look at the following demo, where the z-index is used.
The example shown above used the z-index property to display the dialog on top of other elements.
If you paid close attention to the previous code snippet, you would likely notice that the CSS position property is used along with the z-index property.
The z-index is only effective on positioned elements when its value is absolute, fixed, relative, or sticky.
Issues with z-index
Although a z-index of 1 or 2 is usually adequate for a given scenario, you’ll often see developers choose arbitrarily large values for the z-index.
One reason developers frequently use arbitrary large z-index numbers is that they are unsure about the z-index value of the item they are attempting to position above.
Therefore, instead of searching for an optimal value, they leave the random high figure they’ve found to be effective. Other developers that discover this value later might not exactly know what this value is, and it’s possible that the original developer has also forgotten.
Always seek to carry out workarounds to preserve the code quality and streamline the process when managing the z-index becomes more challenging as the project and team grow in size.
However, thanks to new built-in components like “Dialog” and “Popover,” you won’t need to use these workarounds anymore.
Instead, they will automatically promote the content to the top layer and be positioned above all other elements.
What are the Top Layer and Top Layer Elements?
The <dialog> element has recently become stable across all major browsers. When you open a dialog, what happens behind the scenes is that the browser will put it into a top layer.
The top layer will then render a dialog element on top of all other content. It can be considered similar to placing an element as the last child of the document body.
Check out the CodePen example shown below.
As you can see in the above example, the z-index of dialog1 is set to 1000, which is a significantly immense value. However, irrespective of its z-index value, the top layer element: dialog2, always appears on top of dialog1.
Likewise, you can display top layer elements on top of the other DOM content without applying any styles. Apart from the dialog element, currently supported top layer promoted elements are: popover and elements in fullscreen mode.
The top layer might include several items at once. The last in, first out (LIFO) approach will be used to stack the top layer elements in such circumstances. See the example below for a clearer understanding.
Every top layer element has a ::backdrop, a CSS pseudo-element, which you can use to customize the content below the element.
::backdrop
The ::backdrop can be used to style or hide anything located below the topmost element of the top layer, wholly or partially. The ::backdrop is a viewport-size box that renders underneath any top layer element.
You can use the below code snippet to style the dialog’s backdrop.
.dialog::backdrop {
background-color: #77aeb8;
opacity: 85%;
}The resulting screen will look like the following.
When there are multiple <dialog> elements, the browser draws the backdrop directly underneath the topmost element and on top of the other full-screen components. Take a look at the following example.
The backdrop’s color changes based on the topmost dialog in the demo above.
For example, when dialog1 is opened, the backdrop turns blue, while for dialog2, it changes into a green color. These backdrops are made to overlap one another, so if the upmost backdrop’s opacity is less than 100%, the backdrops below it are visible.
Chrome DevTools Support for Top Layer
To help you debug and visualize the top layer elements, DevTools has added a top layer container at the end of the Elements panel, right after the closing </html> tag.
Support for the top layer in DevTools helps developers comprehend its concept and visualize how its content changes.
Using top layer support and existing DevTools available, you can:
- Identify the elements in the top layer stack at a given time.
- Understand the order of elements in the top layer stack.
Let’s see how to use these features one by one.
Identifying the elements in the top layer stack at a given time
As mentioned above, DevTools has added a top-layer container immediately after the closing </html> tag in the Elements panel.
However, the top-layer container becomes visible in the Elements panel only when any top layer promoted content is rendered. For a better understanding, take a look at the following illustration.
As you can see, the content in the top layer container changes dynamically as we add or remove elements from the top layer stack.
Using the top layer container, you can identify the elements in the top layer stack at a given time.
Moreover, it includes a list of links to navigate to the top layer elements and their backdrops.
You can use the reveal badge available next to a particular top-layer container element to jump to the top layer element.
Next to the top layer element, there is a badge as well. You can click the top layer badge to jump to the top layer container.
Identifying the position of a specific element in the top layer stack
In the top layer badge we have discussed above, you can see a number attached to it. This indicates the position of the element in the top layer stack. The element with the highest number is the latest element added to the top layer stack and is the topmost element of the layer.
The top layer stack in the above screenshot comprises two elements, with the first dialog at the top. If the first element is removed, the second element will be drawn to the top.
The illustration below shows how the order of the elements in the top layer stack changes based on the interaction between the components.
Note: You can hide the badges by clearing the ticks next to the badge you want to hide from the Badge settings.
Final Thoughts
The top layer makes it possible to say adios to things like:
.dialog {
position: fixed;
z-index: 999;
}Although the CSS z-index property is widely used to display dialogs, it becomes less manageable when the project grows in size, resulting in reduced code quality. If you find yourself managing multiple different z-indexes, it might be a call to build a centralised design system or theme that can be applied to your application. For this, I would suggest a tool such as Bit, where you can create an independent theme component that can apply all of your z-indexes in a consistent manner.
As a solution, top layer promoted elements were introduced to place an element on top of all other content.
In this article, I’ve discussed how to display frontend dialogs using both the z-index and top layer, issues with the z-index, and the Chrome DevTools support available for the top layer.
Thank you for reading.
Bonus: Build design systems and themes from reusable components.
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more
- Theming in Components with React and Bit
- How We Build Micro Frontends
- How we Build a Component Design System
- How to reuse React components across your projects
- 5 Ways to Build a React Monorepo
- How to Create a Composable React App with Bit
Top Layer vs Z-Index for Frontend Dialogs was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Nethmi Wijesinghe
Nethmi Wijesinghe | Sciencx (2023-02-06T08:02:30+00:00) Top Layer vs Z-Index for Frontend Dialogs. Retrieved from https://www.scien.cx/2023/02/06/top-layer-vs-z-index-for-frontend-dialogs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.