固定位置在模态窗口上不起作用答案

【问题标题】：Position fixed is not working on Modal Window固定位置在模态窗口上不起作用
【发布时间】：2019-10-21 16:27:39
【问题描述】：

我有用于“模态”的 HTML 和 CSS。在 CSS 中，我定义了 modal-footer 和 modal-fixed-footer 类。 modal-fixed-footer 类不会导致项目“粘”在屏幕上，它仍然会滚动。

<div class="body-blackout"></div>
<button class="btn-big ripple ripple-effect popup-trigger" data-popup-trigger="one">
    Popup Trigger Two
</button>
<button class="btn-big ripple ripple-effect popup-trigger" data-popup-trigger="two">
    Popup Trigger Two
</button>
<div class="popup-modal" data-popup-modal="one">
    <div class="popup-modal-close"></div>
    <h5>Modal One Title</h5>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget lacus
        quis velit viverra iaculis. Interdum et malesuada fames ac ante ipsum 
        primis in faucibus. Vestibulum maximus ipsum ex. Curabitur elementum 
        luctus augue, quis eleifend tortor feugiat vel. Maecenas maximus, ipsum 
        et laoreet congue, diam massa aliquam libero, at pellentesque orci ipsum 
        et velit. Aliquam at ligula nec mi gravida facilisis. Etiam tempor 
        egestas mauris at suscipit.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget lacus
        quis velit viverra iaculis. Interdum et malesuada fames ac ante ipsum 
        primis in faucibus. Vestibulum maximus ipsum ex. Curabitur elementum 
        luctus augue, quis eleifend tortor feugiat vel. Maecenas maximus, ipsum 
        et laoreet congue, diam massa aliquam libero, at pellentesque orci ipsum 
        et velit. Aliquam at ligula nec mi gravida facilisis. Etiam tempor 
        egestas mauris at suscipit.
    </p>
    <div class="modal-fixed-footer">
        <button class="btn-text ripple ripple-effect ripple-red">Disagree</button>
        <button class="btn-text ripple ripple-effect ripple-green">Agree</button></div>
    </div>
    <div class="popup-modal shadow" data-popup-modal="two">
        <div class="popup-modal-close"></div>
        <h5>Modal With Fixed Footer Title</h5>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget lacus
            quis velit viverra iaculis. Interdum et malesuada fames ac ante ipsum 
            primis in faucibus. Vestibulum maximus ipsum ex. Curabitur elementum 
            luctus augue, quis eleifend tortor feugiat vel. Maecenas maximus, ipsum 
            et laoreet congue, diam massa aliquam libero, at pellentesque orci ipsum 
            et velit. Aliquam at ligula nec mi gravida facilisis. Etiam tempor 
            egestas mauris at suscipit.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget lacus
            quis velit viverra iaculis. Interdum et malesuada fames ac ante ipsum 
            primis in faucibus. Vestibulum maximus ipsum ex. Curabitur elementum 
            luctus augue, quis eleifend tortor feugiat vel. Maecenas maximus, ipsum 
            et laoreet congue, diam massa aliquam libero, at pellentesque orci ipsum 
            et velit. Aliquam at ligula nec mi gravida facilisis. Etiam tempor 
            egestas mauris at suscipit.
        </p>
        <div class="modal-footer">
            <button class="btn-text ripple ripple-effect ripple-red">Disagree</button>
            <button class="btn-text ripple ripple-effect ripple-green">Agree</button>
        </div>
    </div>

【问题讨论】：

请也分享 CSS 代码。
格式化后，有些 div 看起来可能不是你想要的样子。

标签： javascript html css position fixed

【解决方案1】：

也许你需要使用这个 CSS：

.modal-fixed-footer {
    position: sticky;
    bottom: -45px !important;
}

但是考虑到您没有发布 CSS，很难理解什么不起作用。

另外，我无法想象类 modal-fixed-footer 应该出现在哪里以及如何出现。

【讨论】：

aurolia-css.github.io/modal 在这个页面上是这个模态。我想，我帮你。
我修改了我的答案，使其与position: sticky 一致。试试看。