html - 水平滚动时，保持红色和蓝色框固定在容器的 Angular 落

Question

仅使用 CSS，我可以在水平滚动时将红色和蓝色框保持在各自的 Angular 落吗？

这个容器将位于我页面的中心，两边都有额外的内容，所以我不认为 position: fixed 是一个可行的选择，因为它将框从页面。

有没有办法在我滚动时将这些框保留在容器的左上角和右上角？

jsFiddle

Answer 1

你可以把你的纽扣放在一个形状相同的容器里。使该 div 相对，然后将它们绝对定位在新的容器 div 中。

<div class="container">
  <div class="absolute-container">
    <div class="stay_left"></div>
    <div class="stay_right"></div> 
  </div>
</div>

新容器的 CSS:

.absolute-container{
  width: 500px;
  height: auto;
  position: absolute;
}

以及添加到您的按钮的行:

.stay_left{
  //float: left;
  position: absolute;
  top: 0px;
  left: 0px;
}
.stay_right{
  //float: right;
  position: absolute;
  top: 0px;
  right: 0px;
}

您也可以删除 float ，因为它们不再是必需的。

JSFiddle