Z-index does not work

Question

I've been having some issues with the z-index property. Below you can see a example:

<div id="popup">
  <div id="button">
  </div>
</div>

<div id="trip">
</div>

<div id="gray">
</div>

https://jsfiddle.net/cf5dhv39/1/

As you can see, I want that the div #button overlay the div #gray (like the div #trip does), but, no matter how much I increase the z-index in #button, the button doesn't overlay the #gray.

This is an issue of *stacking contexts*. This may be helpful: [Basics of the `z-index` property](http://stackoverflow.com/a/32515284/3597276). — Michael Benjamin, Jan 15 '16 at 16:15
Please post relevant CSS code *directly in the question*, not only on JSFiddle. — Michał Perłakowski, Jan 15 '16 at 16:36
Very useful Michael, thanks. Sorry Gothdo, next time i'll do that ;) — Bruno Morais, Jan 15 '16 at 17:15

Nenad Vracar · Accepted Answer · 2016-01-15T16:33:20.567

That is because #popup has smaller z-index than #gray and #button is child of #popup so it will always be behind #gray, but you can place #gray inside #popup

div{
  width: 100px;
  height: 100px;
  background: black;
  position: relative;
}

#popup{
  z-index: 100;
  width: 300px;
  height: 300px;
}

#button{  
  top: 10px;
  left: 10px;
  z-index: 2;
  background: green;
}

#trip{
  top: 40px;
  left: 10px;
  background: blue;
  z-index: 1000;
}

#gray{
  width: 100%;
  height: 100%;
  position: fixed;
  background: gray;
  top: 0px;
  left: 0px;
  opacity: 0.5;
  z-index: 1;
}

<div id="popup">
  <div id="button"></div>
  <div id="gray"></div>
</div>

<div id="trip"></div>

i put gray inside popup and works fine here, thanks ! – Bruno Morais Jan 15 '16 at 17:16 — Bruno Morais, Jan 15 '16 at 17:16

Z-index does not work

1 Answers1