html - 1 out of 3 div with absolute position with css

Question

我的想法是有一个横幅和下面的 3 个 div 并排，我想做的是当我向下滚动时只有中心和右边的 div 移动。

#banner  {
  background:blue;
  color:white;
  position: fixed;
  height:300px;
  width:500px;
  border-style: dotted;
}
#left   {
  background:blue;
  color:white;
  position: fixed;
  top:300px;
  height:300px;
  width:150px;
  border-style: dotted;
  float:left;
}
#center   {
  background:red;
  color:white;
  top:300px;
  left:150px;
  height:700px;
  width:150px;
  border-style: dotted;
  float:left;
  z-index:-1;
}
#right   {
  background:red;
  color:white;
  top:300px;
  left:300px;
  height:300px;
  width:150px;
  border-style: dotted;
  float:left;
  z-index:-1;
}

<div id="banner">
  banner
</div>
<div id="left">
  left
</div>
<div id="center">
  center
</div>
<div id="right">
  right
</div>

据我了解，我应该在左侧和横幅 div 上使用 position: absolute 或 fixed。如果我这样做，我必须给所有 DIV left: 和 top: 属性，并使它们适合在一起。我还应该给他们高度:和宽度和 z-index 到#center 和#right。我担心的是，这将无法在不同的浏览器、分辨率等中正确显示。有没有更简单的方法来做到这一点？这是我失败的尝试:https://jsfiddle.net/y71fqthf/1/如您所见，可以看到盒子位于其顶部的横幅下方。这是我不想要的。

或者这通常是展示网站的糟糕方式吗？

Answer 1

改变一些CSS属性

 #banner  {
      background:blue;
      color:white;
      position: fixed;
      height:300px;
      width:500px;
      border-style: dotted;
    }
    #left   {
      background:blue;
      color:white;
      position: fixed;
      top:300px;
      height:300px;
      width:150px;
      border-style: dotted;
      float:left;
    }
    #center {
    background: red none repeat scroll 0 0;
    border-style: dotted;
    color: white;
    float: left;
    height: 700px;
    margin-left: 156px;
    position: relative;
    top: 300px;
    width: 150px;
    z-index: 8;
    }
    #right {
    background: red none repeat scroll 0 0;
    border-style: dotted;
    color: white;
    float: left;
    height: 300px;
    margin-left: 0;
    position: relative;
    top: 300px;
    width: 150px;
    z-index: 5;
}

https://jsfiddle.net/y71fqthf/1/