css - 固定位置的元素未出现在正确的位置

Question

我正在尝试将页面到顶部代码添加到页面。除了“到顶部”按钮的定位外，一切正常。

我已经在这个 jsfiddle 中展示了问题.您可以在右下方看到 To Top。我需要它位于中间 div 的右下方。

我的代码如下。我查看了固定位置描述，它说它与视口(viewport)对齐。有没有办法覆盖它以使其与特定的 div 对齐？

.layout {
  float: left;
  width: 150px;
  height: 200px;
  border: 1px solid red;
}

#toTop {
  padding: 5px 3px;
  position: fixed;
  bottom: 0;
  right: 5px;
  z-index: 100;
}

<div>
  <div class="layout">Left column</div>

  <div class="layout">Middle column
    <span id="toTop">To Top</span>
  </div>

  <div class="layout">Right column</div>
</div>

Answer 1

您应该将 position: relative; 添加到 .layout 并将 position: absolute; 添加到 #toTop。绝对定位的元素将以其相对父元素为基础