Search code examples
cssz-index

z-index stacking order issue

I've checked the answers to all the similar questions here and searched the web - I've read all the tutorials on stacking order - but I still have a problem. I want to stack an element on top of another element but can't make it stack the way I want. Here's the basic HTML and CSS structure of the elements:

#element-1{
   position: relative;
   z-index: 2 !important;
}
#element-2{
   position: relative;
   display: flex;
   justify-content: center;
   z-index: 1;
}
<div id='element-1'>
   <p>stuff in here</p>
</div>
<div id='element-2'>
   <p>stuff in here2</p>
</div>

So, as you can see, I'm trying to stack element-1 on top of element-2 but it just won't do it.

Solution

  • The answer for this is strange:

    Set the z-index on 'element-2' to 0.

    This is an odd problem, and probably won't come up for anyone else, but I'll go through it anyway.

    I had set the z-index for 'element-2' to 1 because I needed it on the desktop version of the site. It has links inside it and the links didn't work without the z-index. Later I needed to make revisions to the site and while making the changes I checked the pop out navigation menu on the mobile version of the site - which is 'element-1' - and it wouldn't sit in front of 'element-2'. I just checked the site again and when I set the z-index for 'element-2' to 1 it sits in front of 'element-1'. If I delete the z-index for 'element-2' completely it won't work correctly on the desktop version, so the work around for this particular issue is:

    #element-2{
  z-index: 0;
}

    Thanks for reading.