CODEWITHSUNDEEP
cssz-index
tdrsam
tdrsam

Reputation: 527

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.

Upvotes: 1

Views: 164

Answers (2)

tdrsam
tdrsam

Reputation: 527

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.

Upvotes: 0

caramba
caramba

Reputation: 22480

CSS top, left, background-color are only for demonstration purposes.

#element-1 above #element-2 orange is above green cause of higher z-index

#element-1{
    position: absolute;
    z-index: 2;

    /* next properties are only for demonstration purposes but not needed */
    top: 0;
    left: 0;
    background-color: orange;
}
#element-2{
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 1;
 
     /* next properties are only for demonstration purposes but not needed */
    top: 20px;
    left: 20px;
    background-color: green;
}
<div id='element-1'>
    <p>stuff in here</p>
</div>
<div id='element-2'>
    <p>stuff in here</p>
</div>

#element-2 above #element-1 green is above orange cause of higher z-index

#element-1{
    position: absolute;
    z-index: 1;

    /* next properties are only for demonstration purposes but not needed */
    top: 0;
    left: 0;
    background-color: orange;
}
#element-2{
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 2;
 
     /* next properties are only for demonstration purposes but not needed */
    top: 20px;
    left: 20px;
    background-color: green;
}
<div id='element-1'>
    <p>stuff in here</p>
</div>
<div id='element-2'>
    <p>stuff in here</p>
</div>

Upvotes: 1

Related Questions