CSS position: sticky 表现得像固定的（在 w3.css 模式中）

Question

我的模式的粘性关闭按钮无法正常工作。尽管我在我的 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 种不同的移动设备）中，关闭按钮被视为固定元素，它永远不会 "sticks"视口（除了 1 个移动设备运行较旧的 chrome 版本，在那里它工作正常，但因此跨度不可点击）。
我做错了什么？
这是我页面上上述代码的 link：click here

Answer 1

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

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

尝试删除 .w3-modal 的固定位置 class。如果你想固定模式，那么你可以从中删除 padding-top: 100px ，这样 .modalclose 就可以到达屏幕的顶部。

CSS position: sticky 表现得像固定的（在 w3.css 模式中）

CSS position: sticky behaves like fixed (within w3.css modal)

css

modal-dialog

css-position

sticky

w3.css