Ответ 1
Проблема здесь связана с вашим .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>