时间戳

首页 > 解决方案 > CSS 位置：sticky 表现得像固定（在 w3.css 模式中）

css - CSS 位置：sticky 表现得像固定（在 w3.css 模式中）

问题描述

我的模态粘性关闭按钮无法正常工作。即使我在我的 css 规则中指定了它top:0，它也不会表现得像一个固定元素。-webkit-position:sticky;position:sticky;下面你可以看到我的代码片段： 

<html>
<head>
<style>
    .modalclose {
        position: -webkit-sticky;
        position: sticky;
        width: 100%;
        top: 0px;
    }
</style>
<link rel="stylesheet" href="./css/w3.css">
</head>
<body>
    <div class="w3-modal">
        <div class="w3-modal-content w3-display-container">
            <div style="position:absolute;top:0;left:0;height:43px;width:100%;background-color:black;"></div>
            <div onclick="javascript:void(0);" class="w3-button w3-large w3-display-topright modalclose w3-black w3-text-white">x</div>
            <div class="w3-container w3-black">
                <h1>LOREM IPSUM</h1>
            </div>
            <div class="w3-container" style="padding-bottom: 2000px">
                <h5>Lorem Ipsum</h5>
            </div>
        </div>
    </div>
</body>
</html>

在 Firefox（桌面）和 Chrome（3 种不同的移动设备）中，关闭按钮被视为固定元素，它永远不会“粘”在视口的顶部（除了 1 个运行较旧的移动设备chrome 版本，它工作正常，但因此跨度不可点击）。
我究竟做错了什么？
这是我页面上上述代码的链接：单击此处

标签： cssmodal-dialogcss-positionstickyw3.css

解决方案

问题是 .w3-modal 有一个固定的位置和一个 100px 的 padding-top。它永远不会离开屏幕。它有一个 100px 的 padding-top。

您的 .modalclose 已经很粘并且工作正常。

尝试删除 .w3-modal 类的固定位置。如果您希望固定模态，则可以从中删除 padding-top: 100px ，以便 .modalclose 可以到达屏幕顶部。

推荐阅读