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种不同的移动设备）中，关闭按钮被视为固定元素，因此永远不会“粘在”视口顶部（除了1个移动设备外）运行较旧的chrome版本，可以正常运行，但是跨度不可点击）。
我在做什么错了？
这是我页面上上述代码的链接：click here

Answer 1

问题是.w3-modal具有固定位置和100px填充顶部。它永远不会离开屏幕。并且其填充顶部为100px。

您的.modalclose已经发粘并且可以正常工作。

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

CSS位置：粘滞行为像固定的（在w3.css模态内）

1 个答案: