html - 可滚动父级上的绝对定位元素

Question

我试图将父元素的子元素(类似于工具栏)放置在其底部边缘。行为应该与使用浏览器 View 固定位置相同。

我现在正在使用绝对位置。在 parent 需要滚动其内容之前，一切都是完美的。然后工具栏与父项的其余内容一起移动。

有人能解释一下为什么工具栏会移动吗？ 是否可以在不需要任何 javascript 的情况下完成该任务？

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  width: 100px;
  height: 150px;
  overflow-y: auto;
  border: 1px solid black;
}

.mock {
  height: 200px;
  background-color: red;
}

.tool-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background-color: blue;
}

<div class="container">
  <div class="mock"></div>
  <div class="tool-bar"></div>
</div>

Answer 1

工具栏位于可滚动区域内，这就是它滚动的原因。试试这个代码:

HTML

<div class="container">
  <div class="scroll">
    <div class="mock"></div>
  </div>

  <div class="tool-bar"></div>
</div>

CSS

div.scroll { /* style of .container to scroll */ }