CSS:位置:固定在位置内:固定

Question

好的,我注意到了一些东西,但在CSS规范中找不到它.使用样式设置position: fixed将相对于浏览器视口绝对定位它.如果将固定位置元素放在另一个元素中会发生什么？CSS示例如下:

.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>

据我所知,该元素相对于其最近的父级也是固定定位的,该父级也是固定定位的.这是否适用于所有浏览器; 还有,这是一个错误,还是故意的行为？

到目前为止,我还没有在互联网上找到关于这个主题的任何内容,只是"固定位置使其坚持页面".

Answer 1

固定和定位是两个独立的事情.它们的位置与绝对定位的元素相同:相对于它们的包含块.但与绝对定位的元素相比,它们相对于视口保持固定到该位置(即滚动时它们不移动):

http://www.w3.org/TR/CSS2/visuren.html#propdef-position

盒子的位置是根据"绝对"模型计算的,但另外,盒子相对于某个参考是固定的.

定位

包含块的定义说:

如果元素具有"position:fixed",则在连续媒体的情况下由视口建立包含块(...)

和

如果元素具有'position:absolute',则包含块由最近的祖先建立,其'position'为'absolute','relative'或'fixed'(...)

这表明,尽管它们的定位算法是相同的(它们都位于相对于他们的包含块是),固定元件包含块总是视口,与绝对定位元素相反,所以它们应该相对于被定位的是和不要任何绝对或固定定位的元素.

事实上,情况确实如此.例如,如果添加top: 20px到.fixed,则两个div将位于距视口顶部20个像素处.嵌套的固定div不会从其父级顶部向下20像素.

在这种情况下你没有看到的原因是因为你实际上没有设置任何左/上/右/下属性,所以它们的位置由它们在流中的位置决定(它们的" 静态位置" "),正如我的第一句话所说,是根据绝对模型完成的.

Answer 2

仅当使用的元素的祖先之一position: fixed定义了（其值不同于none）任何以下样式规则时，才会发生这种情况：filter, transform, perspective, 其中，在这种情况下，匹配此条件的最近祖先将用作元素坐标的参考而不是视口的坐标。

来自MDN

固定的

该元素将从正常文档流中删除，并且不会在页面布局中为该元素创建空间。它相对于视口建立的初始包含块进行定位，除非它的祖先之一将变换、透视或过滤器属性设置为除“无”之外的其他属性（请参阅 CSS 变换规范），在这种情况下，祖先的行为如下包含块。（请注意，浏览器与透视图和过滤器不一致会导致包含块形成。）其最终位置由顶部、右侧、底部和左侧的值确定。

该值总是创建一个新的堆栈上下文。在打印文档中，元素放置在每页上的相同位置。

Answer 3

第一个元素

position: fixed;

并且内部元素必须是：

position: sticky;