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

Posted 2023-03-06

【中文标题】在父 div 的底部有浮动按钮 [重复]

【英文标题】：Have floating button at the bottom of parent div [duplicate]

【发布时间】：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

【参考方案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 元素。

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