Мой вопрос довольно прост. Я работаю над страницей на мобильной версии, и мы хотим, чтобы желтая кнопка "зацепилась" была зафиксирована снизу, но фиксированная позиция не работает, она работает как абсолютная позиция, и я не знаю почему.
Страница, в которой я работаю: https://www.thechivery.com/products/everything-is-j-ok-tee
Спасибо, Луиш
Проблема здесь связана с вашим .content-container классом-оболочкой, который имеет объявление CSS webkit-transform: translate3d(0,0,0). Объявление преобразования, как этот ответ иллюстрирует, изменяет контекст позиционирования из окна просмотра на повернутый элемент, что по существу означает, что ваш элемент fixed ведет себя так, как если бы он был абсолютно расположен. Вот пример, показывающий разницу между фиксированным элементом внутри преобразованного div и фиксированным элементом вне этого div.
.rotate {
transform: rotate(30deg);
background: blue;
width: 300px;
height: 300px;
margin: 0 auto;
}
.fixed {
position: fixed;
background: red;
padding: 10px;
color: white;
top: 50px;
} <html>
<body>
<div class="rotate">
<div class="fixed"> I am fixed inside a rotated div.</div>
</div>
<div class="fixed"> I am fixed outside a rotated div.</div>
</body>
</html>Это мобильная проблема. Я столкнулся с этим вопросом раньше. В общем, мобильные браузеры, особенно старые, ограничивают использование фиксированного позиционирования, потому что он может занимать слишком много места на экране.