How do I let div superimposed on another div?

Question

How do I let div superimposed on another div?

Navigation

#1 by (2 votes)

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>

javascript html css

asked by anonymous 07.11.2018 / 07:37

1 answer

Using React in backend and small projects Send a string name via post using javascript

score 2 · Accepted Answer

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 :

Only works on positioned elements

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>