Question

我需要制作具有绝对定位元素的可滚动元素和一些用于滚动的大元素。

.container{
  width: 200px;
  height: 200px;
  position: relative;
  overflow: scroll;
  border: 1px solid red;
}
.content{
  height: 300px;
  background: green;
}
.wtf{
  top: 0px;
  position: absolute;
  height: 10px;
  width: 100%;
  background: red;
}

<div class="container">
  <div class="content">
  </div>
  <div class="wtf"></div>
</div>

http://codepen.io/anon/pen/pvKwvZ 在这个例子中，我需要在滚动到底部后将红色元素保留在绿色方块内。

Answer 1

您的.container设置为position：relative。这就是.wtf-Element与.container-Element一起移动的原因！由于position：relative。

，.container成为.wtf-Element的引用对象

要修复.wtf-Element，你可以删除.container位置：relative（或者用默认位置替换它：static），或者......

另一种方法是设置.wtf位置：fixed。同样，这会将.wtf-Element相对于“外部html”定位，而不是相对于.container。

可滚动元素内的绝对定位

1 个答案: