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

您可以通过为文本添加包装div来完成此操作。包装器div的宽度和高度设置为100％，溢出设置为auto，因此它将有滚动框，你的FAB可以放在外部div中，如下所示：

＆＃13;

* {
  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%
}

＆＃13;

<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>

＆＃13;

Answer 2

有很多方法可以实现这一目标，但我希望用.container-parent包裹相同高度和宽度的position: relative以及.fab。这为您提供了一个非滚动元素来定位<div class="container-parent"> <div class="container"> Lorem ipsum dolor sit amet... </div> <Button class="fab"> Ok </Button> </div>按钮。

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

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

使用CSS：

.fab

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

或者，您可以使用原始标记，.fab { position: fixed; top: 225px; left: 190px; }具有固定位置。 CSS就像：

re.sub()

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

Answer 3

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

＆＃13;

* { 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;
}

＆＃13;

<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>

＆＃13;

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

3 个答案: