How do I let div superimposed on another div?

0

How do I leave div #inner-block in the foreground?

#block-1
{
  position: absolute;
  width: 200px;
  height: 200px;
  top: 10px;
  left: 10px;
  background-color: #999;
  z-index: 1;
}
#inner-block
{
  position: relative;
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: #777;
  z-index: 100;
}
#block-2
{
  position: absolute;
  width: 200px;
  height: 200px;
  top: 60px;
  left: 60px;
  background-color: #666;
  z-index: 2;
}
<div id="block-1"><div id="inner-block"></div></div>
<div id="block-2"></div>
    
asked by anonymous 07.11.2018 / 07:37

1 answer

2

Although the html structure is not ideal. It is still possible to reach the expected result! But first we have to understand why it does not work ... Come on!

First we have to understand that z-index :

And most important to understand why it does not work for you

  • Not inherited

This means that when you assigned the z-index to 1 to the # block-1 element, it causes your children not to receive the same.

To work using z-index , you would simply remove it from the # block-1

#block-1
{
  position: absolute;
  width: 200px;
  height: 200px;
  top: 10px;
  left: 10px;
  background-color: #999;
}
#inner-block
{
  position: relative;
  width: 100px;
  height: 100px;
  margin: 20px;
  background-color: #777;
  z-index: 100;
}
#block-2
{
  position: absolute;
  width: 200px;
  height: 200px;
  top: 60px;
  left: 60px;
  background-color: #666;
  z-index: 2;
}
<div id="block-1"><div id="inner-block"></div></div>
<div id="block-2"></div>
    
07.11.2018 / 12:58