将按钮保持在固定位置，与窗口大小无关

Question

我有一个页面，应该在该条的右侧放置一个“提交”按钮，如下图所示： 但是，我希望按钮即使在水平滚动时也能保持在那里，这是通过position: fixed;实现的。在屏幕尺寸调整为大于窗口尺寸之前，此方法一直有效，如此处所示：https://media.giphy.com/media/SiErhserLwSYciEdS3/giphy.gif要解决此问题，我看到了一些建议，使position: absolute;适用于屏幕尺寸调整，但并没有保留按钮固定在某个位置，如此处所示：https://media.giphy.com/media/wHeXCgQ3fEIlPv2tr4/giphy.gif

我的问题是如何将按钮固定在表格工具栏的右侧，不受水平滚动的影响，但不受窗口/屏幕尺寸的增加/减小的影响。

该元素的代码如下：

<div class="one">
    <div class="two">
        <button type="submit" class="btn btn-danger">Submit</button>
    </div>
</div>


.one {
    width: 70%;
    overflow: auto;
    z-index: 10;
    position: relative;
    float: left;
    height: 100%;
    background: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
}

.two {
    height: 49px;
    width: 100%;
    border-bottom: 1px solid #dbdbdb;
}

.btn-danger {
    position: absolute;
}

Answer 1

此行为是通过将CSS的.btn-danger更改为：

.btn-danger {
    position: sticky;
    margin-top: 7px;
    left: 10px;
}

在这种情况下，按钮留在左侧是可以接受的。

Answer 2

为什么不使用引导响应@media查询创建类似这样的断点

  

@media（最小宽度：576像素）{...} //中型设备（平板电脑，768px及以上）@media（最小宽度：768px）{...} //大型设备（桌面，992px及以上）@media（最小宽度：992px）{...} //超大型设备（大型台式机，1200px以上）@media（最小宽度：1200px）{...}