Question

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

这个容器位于我页面的中心，两边都有其他内容，因此我不认为position: fixed是一个可行的选项，因为它会从页面流中取出框。

滚动时，有没有办法让这些盒子保持在我容器的左上角和右上角？

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

您也可以移除浮动因为它们不再需要。

JSFiddle

Answer 2

也许是这样的结构：

<div class="outer">
  <div class="inner">
     <div class="stay_left"></div>
     <div class="stay_right"></div> 
  </div>
</div>
<div class="container">
    <div class="content"></div>
</div>

CSS：

.outer {
  position: absolute;
  width: 100%;
  height: 40px;
  margin: 0 auto;
}

.inner {
  width: 500px;
  margin: auto;
}

<强> jsFiddle

像Paulie_D所说，它需要一些混乱的重组。基本上需要一个外部div来跨越页面的宽度，使用position：absolute将其从页面流中取出并将其放在容器的顶部。然后是一个与容器和边距宽度相同的内部div：auto，因此它居中。然后你可以将盒子向左和向右浮动。

在水平滚动期间，将红色和蓝色框固定在容器的角落

2 个答案: