Да, согласно спецификации, есть способ.
Хотя я согласен с тем, что ответ Грэма Блэквуда должен быть принят, поскольку он практически решает проблему, следует отметить, что фиксированный элемент может быть расположен относительно его контейнера.
Я случайно заметил, что при применении
-webkit-transform: translateZ(0);
к телу это сделало фиксированного потомка относительно него (вместо области просмотра). Таким образом, мои фиксированные элементы left
и top
свойства были теперь относительно контейнера.
Поэтому я провел небольшое исследование и обнаружил, что проблема уже была рассмотрена Эриком Мейером, и даже если это показалось «уловкой», оказалось, что это часть спецификаций:
Для элементов, макет которых определяется блочной моделью CSS, любое значение, отличное от none, для преобразования приводит к созданию как контекста стека, так и содержащего блока. Объект действует как содержащий блок для фиксированных позиционируемых потомков.
http://www.w3.org/TR/css3-transforms/
Итак, если вы примените какое-либо преобразование к родительскому элементу, он станет содержащим блоком.
Но...
Проблема в том, что реализация кажется ошибочной / креативной, потому что элементы также перестают вести себя как фиксированные (даже если этот бит не кажется частью спецификации).
Такое же поведение будет обнаружено в Safari, Chrome и Firefox, но не в IE11 (где фиксированный элемент будет оставаться фиксированным).
Еще одна интересная (недокументированная) вещь заключается в том, что, когда фиксированный элемент содержится внутри преобразованного элемента, а его свойства top
и left
свойства теперь будут связаны с контейнером, что касается box-sizing
свойства, его контекст прокрутки будет расширяться за границу элемента, как будто поле Размер был установлен в border-box
. Для некоторых креативщиков это может стать игрушкой :)
ТЕСТОВОЕ ЗАДАНИЕ