滚动容器中的绝对定位按钮随滚动而移动

Question

我有一个包含大量内容的容器，因此我设置了overflow: auto; 以使其滚动。

我还需要在这个容器的右下角固定位置的按钮（类似于 Material Design 中的 FAB 按钮）。

按钮很好地放置在容器的右下角。不幸的是，当我滚动内容时，按钮随之移动。我对绝对定位的理解是它将元素相对于其父元素定位（使用position: relative;）。那么为什么这个按钮会移动呢？将它修复给父母的正确方法是什么？

预期的行为是无论滚动位置如何，按钮都会停留在右下角。例如，请参阅this page 并搜索短语“滚动期间工具栏的动画离屏”。

请注意，我希望通过绝对定位而不是固定定位来完成这项工作。无论容器在浏览器窗口中嵌套多深，按钮都应位于其容器的右下角。

* { 
    box-sizing: border-box; 
}
.container {
    position: relative;
    overflow: auto;
    height: 256px;
    width: 256px;
    margin-right: 16px;
    border: solid 1px red;
    padding: 4px;
}
.fab {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: white;
    background-color: blue;
}

<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
    <Button class="fab">
        Ok
    </Button>
</div>

请看我的 JSFiddle here

Answer 1

有很多方法可以实现这一点，但我更喜欢用相同高度和宽度的.container-parent 和position: relative 包裹.container。这为您提供了一个非滚动元素来定位 .fab 按钮。

<div class="container-parent">
  <div class="container">
    Lorem ipsum dolor sit amet...
  </div>
  <Button class="fab">
    Ok
  </Button>

</div>

使用 CSS：

.container-parent {
  position: relative;
  height: 256px;
  width: 256px;
}

.fab {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

这是小提琴：http://jsfiddle.net/t702Lknz/4/

或者，您可以使用原始标记，.fab 具有固定位置。 CSS 就像：

.fab {
    position: fixed;
    top: 225px;
    left: 190px;
}

这是小提琴：http://jsfiddle.net/t702Lknz/3/

Answer 2

您可以通过为文本添加一个包装 div 来做到这一点。包装器 div 将其宽度和高度设置为 100% 并将溢出设置为自动，因此它将具有滚动框，并且您的 FAB 可以像这样定位在外部 div 内：

* {
  box-sizing: border-box;
}

.fab {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  float: left;
  margin-right: 16px;
}

.text-wrapper {
  overflow: auto;
  height: 100%;
  width: 100%
}

<div class="container">
  <div class="text-wrapper">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
    maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
    cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
    quidem.
  </div>

  <Button class="fab">
        Ok
    </Button>
</div>

Answer 3

我终于想出了如何做到这一点。由于只有文本应该滚动，它应该在它自己的滚动容器内。这使按钮锁定在其父级上，而不受滚动的影响。这是最终代码。

* { box-sizing: border-box; }

.container {
    /* keep the add button in a fixed location relative to this container */
    position: relative;
    display: flex;
    flexDirection: column;
    height: 200px;
    width: 200px;
    margin-right: 16px;
    border: solid 1px red;
    padding: 4px;
}

.text-container {
    /* ensure that only the text scrolls, not the button */
    flex: 1;
    overflow: auto;
}

.fab {
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: white;
    background-color: blue;
}

<div class="container">
    <div class="text-container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.    
    </div>
    <Button class="fab">
        Ok
    </Button>
</div>