代码之家 › 专栏 › 技术社区 › 3x071c

CSS位置:sticky的行为类似于fixed(在w3.CSS模式中)

w3.css sticky css-position modal-dialog css

0

3x071c · 技术社区 · 6 年前

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种不同的移动设备)中,关闭按钮被视为一个固定元素,它从不“粘”到视口的顶部(除了一个运行较旧Chrome版本的移动设备外,在那里它工作正常,但因此不能单击范围)。

click here

1 回复 | 直到 6 年前

1

ndvo 6 年前

问题是.w3模式有一个固定的位置和一个100px的填充顶部。它永远不会离开屏幕。它有一个100像素的填充顶部。

你的.modalclose已经粘在一起了,工作正常。