Position:fixed не работает при media запросе

Рейтинг: 0Ответов: 1Опубликовано: 06.06.2023

Я хочу, чтобы при изменении ширины экрана sticky контейнер, закрепляющийся в верхней части экрана (top:10px), становился fixed и закреплялся в нижней части экрана (bottom:0)

Я делаю это через @media запрос, в котором меняю позицию контейнера со sticky на fixed. Однако при изменении разрешения контейнер не уходит вниз, а остаётся "висеть" на отступе top:10px, который я задал при указании sticky позиции. Как мне убрать эту "связь" между sticky и fixed?

.box {
    width:100px;
    height: 200px;
    border: 2px solid red;
}
.item {
    width: 100px;
    height: 100px;
    background: blue;

}
.item {
    position: sticky;
    top:0
}

@media (max-width: 600px) {
    .item {
        position: fixed;
        bottom: 0
    }
}
<body>
    <div class="box">
    </div>
    <div class="item"></div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
</body>

css html sticky media-queries fixed
Источник: Stack Overflow на русском

Ответы

▲ 1

медиа должен перебивать настройки, а тут он не перебивает топ 0. Просто добавьте в медиа топ авто, например

.box {
    width:100px;
    height: 200px;
    border: 2px solid red;
}
.item {
    width: 100px;
    height: 100px;
    background: blue;

}
.item {
    position: sticky;
    top:0;
}

@media (max-width: 600px) {
    .item {
        position: fixed;
        bottom: 0;
        top: auto;
    }
}
<body>
    <div class="box">
    </div>
    <div class="item"></div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>