Becky Becky - 5 months ago 8
HTML Question

Issue with getting divs to overlap and position fixed

I'm looking on Cnet's homepage and attempting to duplicate their over-lapping slide-down layer.
Click to see their homepage

enter image description here

How exactly is this done? I know it has to do with the middle layer being positioned fixed and then

z-index
and a high
margin-top
between layers, I just can't figure it out.

Any ideas?



#blue, #green, #red {
height: 500px;
width: 100%;
}
#blue {
background: blue;
z-index: 1;
}
#green {
background: green;
position: fixed;
margin-top: 200px;
}
#red {
background: red;
z-index: 1;
margin-top: 500px;
}

<div id="blue"></div>
<div id="green"></div>
<div id="red"></div>




Answer

Do you mean like this?

Set position to other than static on your non fixed div's for z-index to work properly.

htmlk, body {
  margin: 0;
}
#blue, #green, #red {
  height: 200px;
  width: 100%;
}
#blue {
  position: relative;
  background: blue;
  z-index: 2;
}
#green {
  background: green;
  position: fixed;
  margin-top: 50px;
  top: 0;
  left: 0;
  z-index: 1;
}
#red {
  position: relative;
  background: red;
  z-index: 2;
  margin-top: 200px;
}
<div id="blue"></div>
<div id="green"></div>
<div id="red"></div>