.fixed { position: fixed; width: 100px; height: 100px; background: red; } #parent { right 100px; padding: 40px; } .fixed .fixed { background: blue; }
和HTML:
<div id="parent" class="fixed"> <div class="fixed"> </div> </div>
据我所知,元素相对于其最靠近的父节点也是固定位置的。这是osbervable在所有浏览器;也是,它是一个错误,或故意行为?
到目前为止,我没有在互联网上发现这个话题,只是“固定的位置,使它坚持的网页”。
解决方法
http://www.w3.org/TR/CSS2/visuren.html#propdef-position
The Box’s position is calculated according to the ‘absolute’ model,but in addition,the Box is fixed with respect to some reference.
定位
definition of containing block说:
If the element has ‘position: fixed’,the containing block is established by the viewport in the case of continuous media (…)
和
If the element has ‘position: absolute’,the containing block is established by the nearest ancestor with a ‘position’ of ‘absolute’,‘relative’ or ‘fixed’ (…)
这意味着虽然它们的定位算法是相同的(它们都相对于它们的包含块定位),但是对于固定元素的包含块总是视口,与绝对定位的元素相反,因此它们应当相对于它们定位,而不是任何绝对或固定位置的元件。
事实上,事实确实如此。例如,如果您向.fixed中添加top:20px,则两个div都将位于距视口顶部20个像素处。嵌套的固定div不会从其父元素顶部向下20个像素定位。
在这种情况下你没有看到的原因是因为你实际上没有设置left / top / right / bottom属性,所以他们的位置是由他们在流中的位置(他们的“static position” ),正如我的第一句话所说,是根据绝对模型。