Html 位置：位置中的固定元素：相对父元素。哪个浏览器渲染正确？_Html_Css_Css Position

Html 位置：位置中的固定元素：相对父元素。哪个浏览器渲染正确？

html css

Html 位置：位置中的固定元素：相对父元素。哪个浏览器渲染正确？,html,css,css-position,Html,Css,Css Position,我发现固定位置元素在相对定位的父元素中的行为存在差异。根据我在网上找到的文档，FireFox和Chrome应该将元素固定到视口，而不是父元素。但是，我发现，如果我没有在固定元素上指定左/右值，它的行为在某种程度上是静态和固定的混合，从这个意义上说，它垂直于视口固定，但移动时就像它是父元素中的静态元素一样。我找不到任何有关这些条件的官方/受尊重的文件。它们基本上都是这样表述的：固定定位不要为元素留空间。相反，将其放置在相对于屏幕视口的指定位置，滚动时不要移动它。打印时，将其放置在每页的固定位置

我发现固定位置元素在相对定位的父元素中的行为存在差异。根据我在网上找到的文档，FireFox和Chrome应该将元素固定到视口，而不是父元素。但是，我发现，如果我没有在固定元素上指定左/右值，它的行为在某种程度上是静态和固定的混合，从这个意义上说，它垂直于视口固定，但移动时就像它是父元素中的静态元素一样。我找不到任何有关这些条件的官方/受尊重的文件。它们基本上都是这样表述的：

固定定位 不要为元素留空间。相反，将其放置在相对于屏幕视口的指定位置，滚动时不要移动它。打印时，将其放置在每页的固定位置

另一方面，Safari似乎按照所描述的那样渲染它，它完全固定在视口中，无论我是否将父元素设置为相对，但没有定义任何上/右/下/左属性。如果有机会，可以在Safari中尝试一下，单击位于左侧100像素处的teal div。黄色条将固定在视口中：

那么，哪个浏览器正确地呈现了这一点？我所有的浏览器都已更新到最新版本。一开始，我只是通过阅读文档就认为Safari是正确的，但FireFox和Chrome都有相同的不同观点，似乎是静态和固定的混合

HTML

<body>
    <aside>
        Blah
    </aside>

    <div class="container">
        <div class="nav">
            BLARGH
        </div>
    </div>
</body>

这似乎是一个有趣的案例。让我们深入研究说明书，看看发生了什么。

TL；DR:W3规范在这方面非常模糊/未定义，但似乎所有浏览器都偏离了规范，或者至少，他们决定在细节未定义的地方进行修改。然而，四种主要浏览器（Firefox、Chrome、IE和Opera）是统一的，它们似乎都以同样的方式偏离了规范。Safari绝对是这里的怪人

这就是CSS2.1规范在以下方面的内容：

-在CSS 2.1中，许多框的位置和大小都是根据称为包含块的矩形框的边缘计算的。通常，生成的框充当子体框的包含块；我们说长方体为其子体“建立”包含块。短语“盒子的包含块”表示“盒子所在的包含块”，而不是它生成的块

这只是定义了包含块的内容

-绝对定位：在绝对定位模型中，将从正常流中完全移除一个框，并指定一个相对于包含块的位置

这表示绝对定位的元素相对于包含块定位

-在绝对定位模型中，框相对于其包含块显式偏移。[…]本规范中对绝对定位元素（或其框）的引用意味着元素的

位置

属性的值为

绝对

或

固定

这表示绝对定位元素包括

位置：固定元素以及位置：绝对元素
-固定定位是绝对定位的一个子类别。唯一的区别是，对于固定位置的长方体，包含的块由视口建立
上面写着位置：固定元素将视口（不是字面上的视口，而是一个与视口具有相同尺寸和位置的框）作为其包含框。这将在以后由中的规范进行备份：
如果元素具有“位置：固定”，则包含的块由视口[…]建立
（如果您不熟悉视口是什么，它是“屏幕上的一个窗口或其他查看区域，用户可以通过它查阅文档”。视口的尺寸是初始包含块的基础。整个HTML内容（
，
等）位于视口定义的初始包含块中。）
因此，具有位置的
元素：固定应该有一个与视口相等的包含块，或者初始包含块

现在，确定.nav
元素属性的第一步已经完成，我们可以确定浏览器应该如何工作
CSS2.1规范规定：
-否则，如果“位置”的值为“绝对”或“固定”，则框绝对定位，“浮动”的计算值为“无”，并根据下表设置显示。框的位置将由“顶部”、“右侧”、“底部”和“左侧”属性以及框的包含块确定
这基本上告诉我们，对于绝对定位的元素（位置：固定；
或位置：绝对；
），任何浮动属性都被忽略，
元素（以及其他元素）被设置为显示：块，并根据其框偏移值，即顶部
、右侧
、底部、
和/或左侧
以及初始包含块（视口）来定位元素
-如果元素的“position”属性的值不是“static”，则称该元素已定位。定位元素生成定位框，放置
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;
}