CSS позиция: липкая ведет себя как исправлено (в модале w3.css) - PullRequest
Новая
       50

CSS позиция: липкая ведет себя как исправлено (в модале w3.css)

0 голосов
/ 22 ноября 2018

Моя липкая кнопка закрытия для моего модального окна не работает должным образом.Вместо того, чтобы вести себя липко, он ведет себя как фиксированный элемент, хотя я указал top:0 и -webkit-position:sticky;position:sticky; в моих правилах CSS.Ниже вы можете увидеть мой фрагмент кода: 

<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 (Desktop) и Chrome (3 разных мобильных устройства) кнопка закрытия обрабатывается так, как если бы она была фиксированным элементом, она никогда "прилипает к верхней части области просмотра (за исключением 1 мобильного устройства, работающего под управлением более старой версии Chrome, там оно работает нормально, но, следовательно, диапазон не способен щелкать мышью).
Что я делаю не так?
Здесь´Ссылка на вышеуказанный код на моей странице: нажмите здесь

1 Ответ

0 голосов
/ 22 ноября 2018

Проблема в том, что .w3-модал имеет фиксированное положение и отступ в 100 пикселей.Он никогда не покидает экран.И он имеет отступ в 100 пикселей.

Ваш .modalclose уже липкий и работает нормально.

Попробуйте удалить фиксированное положение класса .w3-modal.Если вы хотите, чтобы модал был зафиксирован, вы можете удалить из него верхнюю часть отступа: 100 пикселей, чтобы .modalclose мог подняться на верхнюю часть экрана.

...