Позиция: фиксированный элемент в позиции: относительный родитель. Какой браузер правильно отображает?
Я вижу расхождение в том, как ведут себя элементы с фиксированной позицией в относительно позиционированном родителе. Согласно документам, которые я нахожу в Интернете, FireFox и Chrome должны зафиксировать элемент в окне просмотра, а не в родительском элементе. Тем не менее, я обнаружил, что если я не укажу левое / правое значение для фиксированного элемента, он будет вести себя как смесь статического И фиксированного в том смысле, что он зафиксирован вертикально в области просмотра, но перемещается так, как если бы он был статический элемент внутри родительского элемента. Я не могу найти официальную / уважаемую документацию, касающуюся этих условий. Все они в основном заявляют что-то вроде следующего:
Фиксированное позиционирование Не оставляйте место для элемента. Вместо этого поместите его в указанное положение относительно области просмотра экрана и не перемещайте его при прокрутке. При печати размещайте его в этом фиксированном положении на каждой странице.
С другой стороны, Safari, похоже, отображает его в том виде, в каком он описан, где он фиксируется исключительно в области просмотра, независимо от того, установил ли я родительский элемент в относительный, без каких-либо свойств top / right / bottom / left. Попробуйте это в Safari, если у вас есть шанс, нажав на чирок, который расположен на расстоянии -100 пикселей слева. Желтая полоса останется прикрепленной к окну просмотра:
http://jsfiddle.net/bbL8Lh4r/2/
Так какой браузер отображает это правильно? Все мои браузеры были обновлены до последней версии. Сначала я думал, что Safari был правильным, просто читая документы, но FireFox и Chrome оба разделяют одно и то же представление, где он, кажется, является гибридом между статическим и фиксированным.
HTML
<body>
<aside>
Blah
</aside>
<div class="container">
<div class="nav">
BLARGH
</div>
</div>
</body>
CSS
body,
aside,
.container,
.nav {
margin:0;
padding:0;
}
aside {
background:red;
width:30%;
height:800px;
float:left;
}
.container {
position:relative;
height:800px;
width:70%;
background:teal;
float:right;
}
.container.stickied {
left:-100px;
}
.container .nav {
position:fixed;
background:yellow;
width:inherit;
}