页面布局设置

Question

我正在看Cnet的主页，他们现在有一个很酷的重叠设置。Click to see their homepage。

这到底是怎么做到的？

我试着弄清楚，但我想不出该怎么做。在我的示例中，绿色将是Cnet主页上的广告部分(带有Zebras)。

​

#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;
}

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

​

Answer 1

这是一个codepen

    <div class="root">
  <div class="content">
    <div id="green">
      <label>ADD GOES HERE</label>
    </div>
    <div class="scroll">
      <div id="blue"></div>
      <div id="red"></div>
      <div id="yellow"></div>
    </div>
  </div>
  </div

css：

.content {
  position: relative;
  .scroll {
    height: 500px;
    overflow-y: scroll;
  }
  #blue,
  #green,
  #red,
  #yellow {
    height: 500px;
    width: 100%;
  }
  #blue {
    background: blue;
  }
  #green {
    position: absolute;
    top: 0;
    z-index: -1;
    background: green;
  }
  #red {
    background: red;
    margin-top: 500px;
  }
  #yellow {
    background: yellow;
    margin-top: 500px;
  }
}

还有改进的空间，但要点是广告(绿色div)绝对与包装可滚动项的div位于同一级别。