可滚动 parent 上的绝对定位元素

Question

我正在尝试将 parent 元素的 child 元素（类似于工具栏）放置在其底部边缘。行为应该与使用浏览器视图固定位置相同。

我现在正在使用绝对位置。在 parent 需要滚动其内容之前，一切都是完美的。然后工具栏与 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

我发现了一个有趣的 fiddle，可能会对您有所帮助。他们正在使用 position:fixed 并且 div 没有嵌套：

http://jsfiddle.net/b2jz1yvr/

<div class="fixedContainer">
    This is experimental
</div>
<div class="otherContainer"></div>

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

.otherContainer {
    height:1000px;
    background-color:#bbb
}

Answer 2

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

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 */ }

可滚动 parent 上的绝对定位元素

Absolute positioned element on a scrollable parent

html

css

css-position