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相同的级别。

页面布局设置

1 个答案: