html - 使用滚动将 child 定位在 parent 的底部

Question

我想将子 div 放置在其父元素的非常底部。通常，我知道这可以使用 position: absolute; bottom: 0; - 但是，这会将 child 置于屏幕底部，但我的页面有 overflow-y，如 height: 1000px;(即内容在下方滚动)，我希望父级位于底部的是 this(所以只有当您向下滚动到最底部时它才可见。

这是我在 codepen 上的一个非常简单的问题示例。

http://codepen.io/anon/pen/qdmowK

Answer 1

您需要相对于父元素定位元素

在您的情况下，这意味着将 position: relative; 应用于父对象。

#center {
  flex: 3;
  background-color: pink;
  position: relative;
}

#child {
  outline: 5px solid yellow;
  position: absolute;
  bottom: 0;
}

Codepen Demo