Почему мой div
с такими стилями
<div style="position: fixed; top: 30px;
right: 30px; z-index: 999999999; height: 100px;
width: 100px; background: red;"></div>
не фиксируется на одном месте, а плавает вместе со страницей?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПочему мой div
с такими стилями
<div style="position: fixed; top: 30px;
right: 30px; z-index: 999999999; height: 100px;
width: 100px; background: red;"></div>
не фиксируется на одном месте, а плавает вместе со страницей?
Fixed работает относительно вьюпорта. А ещё относительно контекста, который создаётся трансформацией (свойство transform). На разное поведение в хроме и в файрфоксе можно напороться в бутстраповской карусели, потому что для файрфокса там анимируется свойство left а для webkit - анимируется transform (или -webkit-transform). http://jsfiddle.net/1dgtdqh9/
html
<div class="wrapper">
<div class="content context">
<div class="fixed"></div>
</div>
</div>
css
* {box-sizing: border-box;}
body {background-color:#eee;}
.wrapper {height: 100px; overflow-y:auto; position: relative; background-color: #fff;}
.content {
height: 500px; width: 100%;
position: relative;
border: 1px solid #0f0;
}
.context {
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
.fixed {position: fixed; width: 50px; height: 50px; right: 2em; top: 1em; background-color:#f00}
Извините, кого ввёл в заблуждение ответом:
Это фича хрома и браузеров на его основе. Fixed он должен быть фиксированным по отношению к viewport, смотреть надо спецификацию css. Но Хром стал делать поправку на контекст родительского блока, это когда у родителя есть свойство absolute или relative. Правильное поведение можно посмотреть в Файрфоксе. Лечится это множеством разных способов реализации, я бы например, такую важную штуку как фиксированный элемент выносил поближе к открывающему или закрывающему тегу body.
В моем случае было css свойство will-change: transform; оно ломало правльную работу fixed, как я понял блок прилипал вместо верха окна браузера к верху родительского блока у которого было прописано данное css свойство