One of the most common problems when working with different visual elements can be the superposition of these. Luckily the solution to these problems is very simple. There is a CSS property called z-index that allows us to handle the elements as if they were layers, allowing us to decide which element will appear above another.
At first this is difficult to understand since we usually see the web in 2 dimensions and we represent it with width and height, but there is also a third aspect which is the depth. This is what the z-index property allows us to control.
The way it works is simple and to explain it we are going to use the following example. We have 2 boxes, one red and one blue, and one is on top of the other but we can modify it.
Example:
HTML
CSS
div {
width:200px;
height:200px;
position:absolute;
}
.blue {
background:blue;
z-index:1; /*The z-index of the blue box is lower than that of the red box*/
}
.red {
background:red;
z-index:2;/*The z-index of the red box is greater than that of the blue box so it is shown after the blue box*/
left:100px;
top:100px;
}
Result looks like this:
Click here to go to Codepen live example
As you can see in the code it is really easy, just add the z-index property to the elements that have conflict. The value that we will put depends on the depth that we want and the element with the highest z-index will be the one that is shown in front. We can use any value, from 1 to whatever we want.
You can see in the example above how the red box is shown in front because it has a higher z-index than the blue box.
Finally, I would like to highlight one thing; the values that the z-index property receives are only integers [whole numbers], so we do not have to add some measure such as px, em, etc. Only integer numbers.
So there you have it! I hope you have found this short tip useful. Feel free to reach out to us if you have any other web related questions.
Graphem Solutions is an award winning web design and development company. If you’re having trouble coming up with a strategy for your website and want to generate and convert more leads contact us. Take advantage of our FREE website analysis and 20 minute consultation. Talk to one of our web experts and get real advice on how to make your website work for you.
The top layer sits above its related document in the browser viewport, and each document has one associated top layer. This means that elements promoted to the top layer needn't worry about z-index or DOM hierarchy. They also get a neat ::backdrop pseudo-element to play with. The spec goes into more details as Fullscreen was a great example of the top layer in use before dialog support came along.
The top layer helps solve the problem of rendering content above the rest of the document.
The important things to remember: - Top layer is outside of the document flow. - z-index has no effect in the top layer. - Each element in the top layer has a styleable ::backdrop pseudo-element. - Each element and ::backdrop generates a new stacking context. - Elements in the top layer are stacked in the order they appear in the set. The last one in, appears on top. If you want to promote an element, remove it, and add it again.
How have we mimicked the top layer until now? Well, it's not uncommon to see developers dropping an empty container element at the end of the
.popup-container {
z-index: 10000;
}
2. And then this will get used as a "faux" top layer. The idea is that this container gets positioned above everything else in the stack. When you want to promote something above everything else, you append it to that container. We can see this in popular packages like SweetAlert, reactjs-popup, Magnific Popup, and others.
With new built-in components and APIs like
.popup-container {
z-index: 10000;
}
3 and "Popover", you won't need to resort to these workarounds. You can promote content to the top layer.
UI frameworks allow us to co-locate promoted elements with their component counterparts. But, they often get separated in the DOM when it comes to rendering.
By using the top layer, promoted elements are where you put them in your source code [for example, a
.popup-container {
z-index: 10000;
}
3]. It doesn't matter how many layers down in the DOM the element is. It will get promoted to the top layer and you can inspect it where you expect it to be, co-located with your component HTML. This makes it easier to inspect both the trigger element and the promoted element in the DOM at the same time. Particularly useful if your trigger element is making attribute updates, for example. This also has an added benefit for accessibility now that the elements are co-located.
To illustrate the top layer versus high z-index, consider this demo.
In this demo, you can open a SweetAlert popup and also open a top layer
.popup-container {
z-index: 10000;
}
3. Open the
.popup-container {
z-index: 10000;
}
3, and then try opening the SweetAlert popup. You'll see that it appears underneath our top layer element. And the root of our SweetAlert popup is using a z-index of 10000 with
.popup-container {
z-index: 10000;
}
9.
.swal-overlay {
z-index: 10000;
position: fixed;
}
You don't need to apply any styles to the
.popup-container {
z-index: 10000;
}
3 to make it appear above all other content.
And that brings us onto DevTools support. Chrome DevTools are adding support for top layer elements so you can inspect the top layer. This makes it easier to debug and visualize how things are stacking up in the top layer or what even is in the top layer.
Alina Varkki has a great article that goes in-depth on using these tools. They're currently available as a preview feature in Chrome Canary version 105.
That’s it!
A brief intro to the top layer. Making it possible to say "Bye!" to things like:
.popup-container {
z-index: 10000;
}
What would you push into the Top Layer? Have you tried out dialog? Or checked out the OpenUI Popover API? Let us know!
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2022-08-22 UTC.
[{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples / code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }]
How do you bring an element to the top in CSS?
To bring an element to front of another element, you can use the CSS z-index property. The z-index property specifies the stack order of an element. An element with greater z-index value will be displayed in front of an element with a lower z-index value.
How do I make an element appear on top of another CSS?
In CSS, relative positioning can be used to move elements on top of each other. To do this, use the position: relative and z-index rules to specify the relative positions.
How do you make an element stay on top CSS?
Setting position: absolute on an element lets you use the CSS properties top , bottom , left , and right to move the element around the page to exactly where you want it. For example, setting top: 1em move the element so its top is 1em from the top of the page.
How do you put something on top layer in CSS?
The z-index property is used along with the position property to create an effect of layers. You can specify which element should come on top and which element should come at bottom. A z-index property can help you to create more complex webpage layouts.