【发布时间】：2015-02-19 22:26:55
【问题描述】：
我发现固定位置元素在相对定位的父元素中的行为方式存在差异。根据我在网上找到的文档，FireFox 和 Chrome 应该将元素修复到视口而不是父级。但是，我发现如果我没有在固定元素上指定左/右值，它的行为是静态和固定之间的一种混合，从某种意义上说，它垂直于视口固定，但就像它一样移动父元素中的静态元素。我找不到围绕这些条件的任何官方/受人尊敬的文件。它们基本上都声明如下：
固定定位 不要为元素留出空间。相反，将其放置在相对于屏幕视口的指定位置，并且在滚动时不要移动它。打印时，将其放置在每一页的固定位置。
另一方面，Safari 似乎按照描述的方式渲染它，它完全固定在视口中，无论我是否将父元素设置为相对而没有定义任何上/右/下/左属性。如果有机会，请在 Safari 中尝试一下，方法是单击距离左侧 -100 像素的蓝绿色 div。黄色条将固定在视口上：
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;
}
【问题讨论】：
-
有趣的是，如果您明确定义任何框位置属性，则该元素将不再继承其他元素。
-
@GregRozmarynowycz 正确。该行为在 W3C 规范中定义，关于框偏移和
fixed元素的包含块。 -
CSS2.1 表示在计算固定定位元素的静态位置时，指定的包含块是初始包含块，而不是视口。 （由于某种原因，我在 css-position 中找不到相同的文本。）它说初始包含块采用视口的尺寸，并且似乎暗示即使内容溢出视口也不会改变，但它在这方面尚不清楚。所以也许这个问题的根源是：初始包含块是如何确定的？
-
@BoltClock 根据我回答中的研究，在这种情况下，我们可以说它完全不是由浏览器决定的 :-P
标签： html css css-position