Fixed Positioning
Do not leave space for the element. Instead,position it at a specified position relative to the screen’s viewport and don’t move it when scrolled. When printing,position it at that fixed position on every page.
另一方面,Safari似乎渲染它,因为它被描述为纯粹固定到视口的地方,无论我是否将父元素设置为相对而没有定义任何顶部/右侧/底部/左侧属性.如果你有机会通过点击从左边-100像素的青色div来尝试在Safari中试试.黄色条将固定在视口中：
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中所说的：
- 07001 – In CSS 2.1,many Box positions and sizes are calculated with respect to the edges of a rectangular Box called a containing block. In general,generated Boxes act as containing blocks for descendant Boxes; we say that a Box “establishes” the containing block for its descendants. The phrase “a Box’s containing block” means “the containing block in which the Box lives,” not the one it generates.
这只是定义了包含块的内容.
- 07002 – Absolute positioning: In the absolute positioning model,a Box is removed from the normal flow entirely and assigned a position with respect to a containing block.
这表示绝对定位的元素相对于包含块定位.
这表示绝对定位的元素包括位置：固定;元素和位置：绝对;元素.
- 07004 – Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed position Box,the containing block is established by the viewport.
这说位置：固定;元素具有视口(嗯,不是字面上的视口,而是具有与视口相同的尺寸和位置的框)作为其包含框.稍后将通过10.1 Definition of containing block中的规范对此进行备份：
If the element has ‘position: fixed’,the containing block is established by the viewport […]
(如果您不熟悉视口的内容,则它是“用户查阅文档的屏幕上的窗口或其他查看区域”.视口的尺寸是初始包含块的基础.整个HTML content(< html>,< body>等)位于视口定义的此初始包含块中.)
因此,< div class =“nav”>有位置的元素：固定;应用于它应该有一个等于视口的包含块,或初始包含块.
现在确定.nav元素属性的第一步已经完成,我们可以确定浏览器的行为方式.
CSS2.1规范有这样的说法：
- 07006 – Otherwise,if ‘position’ has the value ‘absolute’ or ‘fixed’,the Box is absolutely positioned,the computed value of ‘float’ is ‘none’,and display is set according to the table below. The position of the Box will be determined by the ‘top’,‘right’,‘bottom’ and ‘left’ properties and the Box’s containing block.
这基本上告诉我们,对于绝对定位的元素(position：fixed;或position：absolute;),任何float属性都会被忽略,< div>元素(以及其他)设置为display：block;,并且元素根据其顶部,右侧,底部和/或左侧的框偏移值与初始包含块(视口)组合定位.
- 07007 – An element is said to be positioned if its ‘position’ property has a value other than ‘static’. Positioned elements generate positioned Boxes,laid out according to four properties: top,right,bottom,left.
这再次证实了< div class =“nav”>应根据其箱子偏移量进行定位.
虽然它在几个地方说如果两个相反的偏移值是auto,那么它们被设置为零,CSS2.1似乎没有指定如何定位左和右值为零的元素的情况.但是,CSS Box Alignment Module Level 3确实提到该值设置为“start”,其定义为：
Aligns the alignment subject to be flush with the alignment container’s start edge.
这应该意味着元素位于包含块的左上角,对于位置：固定;元素,应与视口相同.但是,我们可以看到,对于所有主流浏览器,情况并非如此.主流浏览器似乎都没有设置位置：fixed;按照规范的指示,包含视口的块.相反,他们都表现得好像行为在位置之间应该是相同的：固定;和位置：绝对;
总而言之,当你用规范自己的话说有这么多证据时,答案是明确的：位置：固定;元素应该具有设置到视口的包含块.同样清楚的是,供应商都决定以他们自己的方式填写一个模糊的部分规范,与此声明相冲突或完全无视此声明.最有可能发生的事情是,一个浏览器实现了他们的解释(IE7是第一个支持位置：固定;我相信,紧接着是Firefox 2.0),其余的跟随.
