CSS:position:fixed里面的位置:fixed

前端之家收集整理的这篇文章主要介绍了CSS:position:fixed里面的位置:fixed前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
好吧,我注意到了一些东西,但是在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>

据我所知,元素相对于其最靠近的父节点也是固定位置的。这是osbervable在所有浏览器;也是,它是一个错误,或故意行为?

到目前为止,我没有在互联网上发现这个话题,只是“固定的位置,使它坚持的网页”。

解决方法

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

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” ),正如我的第一句话所说,是根据绝对模型。

原文链接:https://www.f2er.com/css/221510.html

猜你在找的CSS相关文章