[Solved]: CSS z-index not working
When developing a website, sometimes HTML elements may overlap. Overlapping is a scenario where two or more elements are displayed in the same area on top of each other on the web page.
This can happen by design or when the CSS properties that control the positioning and size of the elements are not set properly.
When elements overlap, the one that appears later in the HTML code will appear on top (when displayed on the page) of the one that appears earlier.
Example
<div class="redbox"></div>
<div class="greenbox"></div>
<div class="bluebox"></div>
In this example, if the three div elements overlap, by default the one with the class "bluebox" will appear at the top, followed by "greenbox" and then "redbox".
Overlapping can be a problem if the elements are meant to be separate and distinct parts of the web page. This can also cause issues with readability, usability, and accessibility.
To avoid overlapping, it is important to ensure that each element is positioned correctly using CSS. This can be achieved by setting the position, top, left, right, and bottom properties of the elements appropriately.
On the other hand, overlapping can also be done intentionally such as when you want to create layered designs. A common example is when creating a fixed header on the page. In such a case, we want the header to always appear on top (in front) of other elements when scrolling down. Another common example is when working with modals.
We can use z-index to control the stacking order of overlapping elements, which can help ensure that the right elements are on top.
What is z-index?
z-index is a CSS property that specifies the stack order of an element. The stack order determines which element appears on top of the other elements when they overlap. The higher z-index value an element has, the closer it is to the viewer, and the more likely it will appear on top.
Example
.redbox {
z-index: 5;
}
The default z-index value for page elements is 0. This property accepts both positive and negative integer values. The elements assigned a negative z-index value will be behind the default stack order (ie, will appear behind elements without a set z-index value).
Elements with the same z-index value have the same stack order, and therefore their order in the HTML document determines which one appears on top.
Challenges with z-index
As a web developer, you may at times experience challenges when working with CSS z-index where it doesn't seem to work as expected. For instance, you may want an element to appear in front of everything on the page but that doesn't happen despite assigning it a very large z-index value.
We will explore the reasons behind this issue and provide solutions that are easy to understand and implement.
Below are some common scenarios that might cause challenges with z-index and how to fix them:
1. Missing element positioning
z-index only works with positioned elements with a position value of either "absolute", "relative", or "fixed" (static doesn't work). If an element is not positioned, z-index will not work.
Even if you try setting the z-index of an element to some large value like 50000, it will still be displayed behind a positioned element (regardless of its z-index value).
Ensure that the element you are using z-index on is positioned with a position value of either absolute, relative, or fixed in order to work as expected.
Example
.redbox {
position: relative;
}
If the other overlapping element(s) is unpositioned, you won't even need the z-index property as the positioned one automatically appears at the top.
2. Limitation of a child by the parent element
The z-index is relative to the parent-child relationship of elements. A child element can have a larger z-index value than all other elements on the page but still appear behind other elements that overlap with its parent.
I will use an example to explain.
HTML
<div class="redbox"></div>
<div class="greenbox">
<div class="bluebox"></div>
<div class="greybox"></div>
</div>
CSS
.redbox {
position: absolute;
z-index: 3;
}
.greenbox {
position: absolute;
z-index: 1;
}
.bluebox {
position: absolute;
z-index: 25;
}
.greybox {
position: relative;
z-index: 8;
}
In the example above, we have four div elements with classes "redbox", "greenbox", "bluebox", and "greybox". The "bluebox" and "greybox" divs are both child elements of the "greenbox" div. All the divs are positioned and assigned a z-index value. If all the div elements overlap, you would expect that the div with the highest z-index value ("bluebox") will be the one at the top/front. However, that is not the case here.
The div with the class "redbox" will appear at very the top. The reason why "bluebox" doesn't appear at the top despite having the highest z-index value is due to the limitation by its parent div. The "greenbox" div has a lower z-index value (1) than that of "redbox" div (3) and thus has a lower stacking order. No matter how big the z-index value its children can have, they can't get a higher stacking order than their parent among its siblings.
The z-index of a child element is relative to that of its parent and only applicable among its sibling elements but not beyond its parent. The "bluebox" div has a higher stacking order than "greybox" div because it has a higher z-index value and they both are siblings (at the same level).
Increasing the z-index value of the "greenbox" div to be more than that of "redbox" div will make "bluebox" div to have the highest stacking order and thus appear at the top. Moving the "bluebox" div outside of "greenbox" div would also make it automatically have the highest stacking order since it will no longer be a child of "greenbox" and thus the limit by the parent will be removed.
If an element is positioned and has the highest z-index value but still appears behind (lower than) other elements, check the z-index value of its parent element in relation to other elements of the same level on the page. Adjust the parent element's z-index value accordingly to be higher than that of its siblings. Alternatively, you can move the child element outside of its parent to get rid of the limitation by the parent.
3. Assigning large values to z-index
Sometimes people assign very high values to the z-index property (eg. 5000). Though this works, it mostly introduces some challenges later.
For instance, you may need to raise the stacking order of an element by assigning it a z-index value. Maybe you assign it a value of 100 or 1000 only to realize it doesn't work. Then later after a headache trying to fix it, you find out that some other element has a z-index of 10000.
Avoid using high z-index values unnecessarily. Always use the minimum z-index value required to achieve the desired stacking order.
Conclusion
z-index is a powerful CSS property that can help you control the stacking order of elements within the page. However, it's likely for a web developer to experience challenges when working with CSS z-index where it doesn't seem to work as expected.
In this article, we have covered three common causes for z-index not working and how to fix them. It's my hope that this article was helpful to you.
You May Also Like:
- [Solved]: Why isn’t my CSS being applied?
- What are pseudo-elements in CSS?
- What are CSS pseudo-classes?
- Differences between px, rem, and em in CSS
- How to change text selection color using CSS
- How to change the default color of the browser scrollbar using CSS
- How to style HTML text with color gradient using CSS
- How to make color gradient borders with CSS on HTML pages
