将按钮放在div或屏幕的底部

Question

我想将我的按钮放在div的底部或屏幕的底部(但是处于非固定位置).我的代码结构如下所示:

1. DIV-1
   2. DIV-2
      3. DIV-3
         4. 按键

我想把按钮放在div 1的底部,使用jQuery设置高度(高度是屏幕的高度,所以将按钮放在屏幕的底部也可能是一个解决方案)

到目前为止我尝试过的:

CSS

.button {
    position: fixed;
    bottom: 10px;
    left: 50%;
    margin-left: -104.5px; /*104.5px is half of the button's width*/
}

这使按钮(我想要的东西)居中,并将它放在屏幕的底部,但位置是固定的,所以如果我向下滚动按钮也会下降.我也试着设置按钮的position到absolute和DIV-1的position到relative,这也不能工作.

编辑: div的高度是可变的,因此边距可能不是一个很好的选择

Answer 1

只需按下按钮位置:绝对不放置div相对

.button {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -104.5px; /*104.5px is half of the button's width*/
}
.test{
  height:1000px;
  
}

<div class="test">
 <div>
    <div>
      <button class="button">
            test
      </button>
    </div>
  </div>
</div>