How do I let div overlap the other div?

Asked

Viewed 360 times

0

How do I leave the 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

  • Place #block-1 with z-index greater than the #block-2, or 3 or more.

  • z-index only works with position Absolute or Fixed elements

  • It seems to me that the html structure used is not ideal for the purpose you want to get. Why div block-2 would be in the middle of the other two, despite being an element that does not relate to them in html ? Seems to be a structural problem

  • I agree with @Isac , How you want the child of an element to overlap with an element that is the brother of the father. This is not possible... In your case I believe you should put the div id="Inner-block" inside the div id="block-2". Note that the z-index hierarchy of the child id="Inner-block" refers to the father himself, not the father’s brother!

  • Sam I need #block-3 to be in front of block-1 and before block-2

  • Block-2 and Hide are below block-3. What if you put block-1 first than block-3. Block-3 when it is in Sticky is below block-1.

Show 1 more comment

1 answer

2


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

First we have to understand that the z-index:

And most important to understand why it doesn’t work in your case

  • Is not inherited

This means that when you assigned z-index to 1 to the element #block-1 he makes his children not receive the same.

To work using z-index simply remove it from the element #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>

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.