CSS z-index not working? How to fix z-index CSS tutorial

Do you have a problem, because you enter higher and higher values ​​z-index and nothing happens? Surely there are several ways to do it. Let’s see!

Z-index not working? Check the position of the stylized item

Most often, if I had trouble with getting some elements on top, I just forgot to give it the style position: absolute; or position: relative;. If you want to set an element with the distance from the parent’s edge, use the absolute value. On the other hand, if the element is still to be in place, but you want to knock it over another that overlaps, you can assign its position as relative and z-index value as higher than the element that covers it.

element {
    position: relative;
    z-index: 10;
}

Z-index does not work with relative position

If the tip above doesn’t work, then your item is in the wrong place in your HTML structure. It may be that you have for example the following structure:

nav (relative)
 |-- ul.nav (relative)
 |    |--li.item (absolute)
 |
 |-- img.picture (absolute)

Firstly I have to tell you to avoid such mistakes. When the image above overlaps the navigation and you want to have a dropdown, but you don’t see it, you will need to change the position of the navigation or image. A relative navigation position is also unnecessary. If you have this problem that z-index does not work, then try to move your item higher in the DOM tree.

Z-index how to fix: move the item higher in the HTML tree

Look at a popup with a newsletter that pops up so often on the websites you visit. You will see that it is usually placed directly in the body tag, because it guarantees that it penetrates all layers. It can’t be done higher. Try this solution and let me know if I helped you. 🙂

Oceń artykuł
[1]