bboni bboni - 6 months ago 14
CSS Question

Div replacing div but overlaps wrapper

I am trying to create a page in which a certain div needs to get visible and replace another div(the other div will be set to invisible).

I can get the first div over the other div by using

position: absolute;

but the problem now is that the two divs are also in other divs. And if I use
position: absolute;
then these two divs will overlap the other divs. I have made an example please have a look:



#wrapper {
background-color: red;
min-height: 700px;
}

#list1 {
background-color: yellow;
min-height: 200px;
position: relative;
}

#listinList {
background-color: blue;
min-height: 200px;
position: absolute;
}

#listOverList {
background-color: green;
min-height: 200px;
position: absolute;
}

<div id="list1">
beginning list 1

<div id="listinList">
The first list
</div>

<div id="listOverList">
this must go over the listinlist div
</div>
</div>





My question now is: how can I get the green block (as in the example) to stay inside the yellow wrapper divs.

Answer

Just hide the div#listinList. After this, add the position to div#listOverList. I've set the div#listOverList to half opacity to show the position over the yellow div.

#wrapper {
    background-color: red;
    min-height: 700px;
  }

#list1 {
  background-color: yellow;
  min-height: 200px;
  position: relative;
}

#listinList {
  background-color: blue;
  min-height: 200px;
  position: absolute;
  display: none;
}

#listOverList {
  min-height: 200px;
  background-color: green;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
}
<div id="list1">
  beginning list 1
  <div id="listinList">
    The first list
  </div>
  <div id="listOverList">
    this must go over the listinlist div
  </div>
</div>