z-index not working properly?

Question

I have the HTML:

<div class="arrow" id="link1">
    <img class="bellow" src="bottom.jpg" width="305" height="229" />
</div>

And the CSS:

.arrow {
  display: block;
  width: 305px;
  height: 229px;
  z-index: 10;
  position: relative;
  background-image: url(top.png);
}

#link1 {
  background-position: 0 458PX;
  z-index: 10;
  position: absolute;
}

#link1:hover {
  background-position: 0 229px;
  z-index: 10;
  position: absolute;
}

.bellow {
  z-index: 1;
  position: absolute;
}

But the background-image is not showing up on top of the bottom.jpg what is wrong with the z-index?

score 3 · Answer 1 · edited May 23 '17 at 12:34

You cannot position an element inside a parent element to be behind that parent element.

Consider an HTML structure like so:

<div class="level-1">
    <div class="level-2">
        <div class="level-3"></div>
        <div class="level-3"></div>
    </div>
    <div class="level-2">
        <div class="level-3"></div>
        <div class="level-3"></div>
    </div>
</div>
<div class="level-1">
    <div class="level-2">
        <div class="level-3"></div>
        <div class="level-3"></div>
    </div>
    <div class="level-2">
        <div class="level-3"></div>
        <div class="level-3"></div>
    </div>
</div>

I've conveniently named each division with a level-class to easier understand.

Z-indexing works by applying that z-index to other elements within each parent. So being on the root element, the z-index for each level-1 division would only apply to other level-1 divisions. Just like a level-2 index would only apply to another level-2 index, and the same with a level-3 index.

So indexing from inside out: the level-3 indices would be ordered first under each of their parents. Note that their z-index would not apply to other level-3 elements in other parents, only other elements under the same parent. Once ordering of those level-3 elements is done, they are placed into their level-2 parent. At that point, the level-2 elements get ordered based on their indices relative to their parent, and then placed into their parent the same way the level-3 elements were, and then the level-1 elements are done.

So the way your HTML structure is set up, with an image inside of a division, that image cannot appear underneath its parent. Structurally, that doesn't make sense anyways. A child is meant to be contained within a parent, it should never stack with its parent. If you really want to place the image behind the division, it should be place outside of the parent and positioned accordingly.

Having said that, there is a bit of a hackish workaround, but it requires removing the position: absolute from the parent division and using a negative z-index.

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

body (or any other positioned parent element) is the reference for both the child and and parent element

source: z-index between Children and Parents

This means the z-index on your parent also applies to the child element. Where the child element(image) will also take z-index: 10;. With the parent and child both have a z-index of 10, the child will actually be rendered over the parent.

To fix this you should not even give a z-index to the parent, but only to the child(the image):

.bellow {
    z-index: -1;
    position:absolute;
}

Where the image will have a lower value as the default value, thus will be underneath its parent.

jsFiddle

I should note that this *only* works if the z-index is never defined on the parent. Defining a z-index on the parent division (even a negative one) will cause it to stop working. — animuson, Nov 27 '13 at 18:12

codingrose · Answer 3 · 2013-11-27T18:02:10.700

0

z-index works with absolute/fixed/relative positions only.

Write:

.arrow{position:relative;}

Also,

Remove image out of div.

It should work.

Fiddle here.

edited Nov 27 '13 at 18:02

answered Nov 27 '13 at 17:53

codingrose

15,563
11
39
58

What and change it to a div with a background-image? – maxisme Nov 27 '13 at 18:06

z-index not working properly?

3 Answers3

jsFiddle