html - 可滚动元素内的绝对定位

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在此示例中，我需要在滚动到底部后将红色元素保留在绿色方 block 内。

Answer 1

您的 .container 设置为 position: relative。这就是 .wtf-Element 与 .container-Element 一起移动的原因!由于position:relative，.container 成为 .wtf-Element 的引用对象。

要固定 .wtf-Element，您可以删除 .container position: relative(或将其替换为默认位置:static)，或者 ...

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