在父 div 的底部有浮动按钮 [重复]答案

【问题标题】：Have floating button at the bottom of parent div [duplicate]在父 div 的底部有浮动按钮 [重复]
【发布时间】：2019-01-18 23:47:46
【问题描述】：

我需要将这个button 固定在父div 的底部并浮动在其滚动内容上。

我真的很惊讶这不起作用。我希望父级上的position: relative 与固定元素上的bottom: 0 相结合来实现这一点..

PS：按钮必须在内部 div。

div {
  position: relative;
  width: 200px;
  height: 100px;
  overflow-y: scroll;
  background-color: lightblue;
}

button {
  position: fixed;
  bottom: 0;
}

body {
  height: 200px;
}

<div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, assumenda. Sint optio, praesentium omnis voluptas facilis nam asperiores quod itaque repellat eaque aut molestias reiciendis quibusdam harum rem, cumque nihil!</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ab! Tempore sunt eligendi, voluptates quaerat autem reprehenderit perferendis id hic voluptate modi nisi in eaque quasi veniam delectus, voluptatibus quo.</p>

  <button>Bütton</button>

</div>

【问题讨论】：

试试我的代码。它可能对你有用。
您误解了fixed 的工作原理。它是相对于浏览器窗口的，而不是父元素。添加一个额外的包装器并使用absolute:jsfiddle.net/28vszjxy

标签： html css css-position

【解决方案1】：

    div {
      position: relative;
      width: 200px;
      height: 100px;
      overflow-y: scroll;
      background-color: lightblue;
    }
    
    button {
      position: sticky;
      bottom: 0;
    }
    
    body {
      height: 200px;
    }

    <div>
    
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, assumenda. Sint optio, praesentium omnis voluptas facilis nam asperiores quod itaque repellat eaque aut molestias reiciendis quibusdam harum rem, cumque nihil!</p>
    
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ab! Tempore sunt eligendi, voluptates quaerat autem reprehenderit perferendis id hic voluptate modi nisi in eaque quasi veniam delectus, voluptatibus quo.</p>
    
      <button>Bütton</button>
    
    </div>

您的代码几乎可以工作了。您只需进行一项更改。

添加位置：粘性；对于div 元素。

试试这个，让我知道更新？

【讨论】：