我看到固定位置元素在相对定位的父对象中的行为方式存在差异。根据我在网上找到的文档，FireFox和Chrome应该将元素固定到视口(viewport)而不是父对象。但是，我发现，如果我没有在固定元素上指定左/右值，那么它将表现为静态和固定之间的某种混合，这意味着它是垂直固定在视口(viewport)上，但会像移动父元素内的静态元素。我找不到有关这些情况的任何官方/受人尊敬的文档。它们基本上都声明如下内容:
Source
另一方面，无论是将parent元素设置为relative，而未定义任何top/right/bottom/left属性，Safari似乎都将其渲染为纯描述到视口(viewport)的描述。如果有机会，可以在Safari上尝试一下，方法是单击深青色div，将其定位在距左-100像素处。黄色条将固定在视口(viewport)上:
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;
}
最佳答案
这似乎是一个有趣的案例。让我们深入了解规范以了解发生了什么。
TL; DR: W3规范在这一方面非常模糊/未定义，但是似乎所有浏览器都偏离了规范，或者至少是他们决定了未定义细节的地方。但是，四个主要的浏览器(Firefox，Chrome，IE和Opera)结合在一起，它们似乎都以相同的方式偏离了规范。 Safari绝对是这里的怪人。
这就是CSS2.1规范在Chapter 9: Visual formatting model中必须说的:
这只是定义了一个包含块。
这表示绝对定位的元素相对于包含块定位。
这表示绝对定位的元素包括position:fixed;元素以及position: absolute;元素。
这就是说position: fixed;元素的视口(viewport)(包含其视口(viewport)(不是字面上的视口(viewport)，而是具有与视口(viewport)相同的尺寸和位置的视口(viewport)))。稍后由 10.1 Definition of containing block 中的规范备份:
(如果您不了解视口(viewport)是什么，它就是“屏幕上的窗口或其他查看区域，用户可通过该视口(viewport)查阅文档。”视口(viewport)的尺寸是初始包含块的基础。整个您的HTML内容(<html>，<body>等)位于视口(viewport)定义的此初始包含块内。)
因此，应用了<div class="nav">的position: fixed;元素应具有一个等于Viewport的包含块，或者是初始包含块。
现在确定.nav元素的属性的第一步已经完成，我们可以确定浏览器的行为方式。
CSS2.1规范有这样的说法:
这基本上是在告诉我们，对于绝对定位的元素(position: fixed;或position: absolute;)，将忽略所有float属性，并将<div>元素(以及其他元素)设置为display: block;，并且根据元素的框偏移值来定位元素top，right，bottom,和/或left与初始包含块(视口(viewport))结合使用。
这只是重申了<div class="nav">应该根据其框偏移量进行定位的事实。
尽管在多个地方都说如果两个相对的偏移量值是auto，那么它们将被设置为零，但CSS2.1似乎并未指定如何定位left和right值均为零的元素的情况。 CSS Box Alignment Module Level 3 ，但确实提到该值设置为“start”，其定义为:
这应该意味着该元素位于包含块的左上 Angular ，对于position: fixed;元素，该元素应与视口(viewport)相同。但是，我们可以看到，对于所有主流浏览器，都不是。主流的浏览器似乎都没有按照规范的指示将position: fixed;的包含块设置为视口(viewport)的包含块。取而代之的是，它们的所有行为都好像position: fixed;和position: absolute;之间的行为应该相同。
总而言之，当您在规范本身的文字中有这么多证据时，答案很明确:position: fixed;元素应在视口(viewport)中设置一个包含块。还清楚的是，所有供应商都决定以自己的方式填写规范的模糊部分，与该声明冲突或完全无视。最有可能发生的事情是，一个浏览器实现了它们的解释(IE7是第一个支持position: fixed;的解释，我相信，不久之后是Firefox 2.0)，其余的随后是。
关于html - 位置:fixed element within a position:relative parent.哪个浏览器可以正确呈现？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28576291/