位置:固定元素位置:相对父级.哪个浏览器呈现正确？

Question

位置:固定元素位置:相对父级.哪个浏览器呈现正确？

我看到固定位置元素在相对定位的父级中的行为方式存在差异.根据我在网上找到的文档,FireFox和Chrome应该将元素固定到视口而不是父视图.但是,我发现如果我没有在固定元素上指定左/右值,它在静态和固定之间的某种混合行为,在某种意义上它是垂直固定到视口,但移动就好像它是父元素中的静态元素.我找不到围绕这些条件的任何官方/受尊敬的文件.它们基本上都表示如下内容:

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

资源

另一方面,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>

Run Code Online (Sandbox Code Playgroud)

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;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Tyl*_*erH 13

这似乎是一个有趣的案例.让我们深入了解规范,了解正在发生的事情.

TL; DR: W3规范在这个领域非常模糊/未定义,但似乎所有浏览器都偏离规范,或者至少,他们做出了未定义细节的决定.然而,四个主要的浏览器(Firefox,Chrome,IE和Opera)是统一的,因为它们似乎都以同样的方式偏离了规范.Safari绝对是这里的奇怪人物.

这就是CSS2.1规范在第9章中所说的:视觉格式化模型:

9.1.2包含块 -在CSS 2.1中,许多盒位置和大小是相对于称为包含块的矩形框的边缘计算的.通常,生成的框用作包含后代框的块; 我们说一个盒子"建立"其后代的包含块.短语"一个包含块的块"意味着"盒子所在的包含块",而不是它生成的那个块.

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

9.3定位方案 -绝对定位:在绝对定位模型中,完全从正常流中移除一个框,并为相应的包含块指定一个位置.

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

9.6绝对定位 -在绝对定位模型中,框相对于其包含块明确偏移.[...]本规范中对绝对定位元素(或其框)的引用意味着元素的position属性具有值absolute或fixed.

这表示绝对定位的元素包括position:fixed;元素和position: absolute;元素.

9.6.1固定定位 -固定定位是绝对定位的子类别.唯一的区别是对于固定位置框,包含块由视口建立.

并且这表示position: fixed;元素具有视口(嗯,不是字面上的视口,而是具有与视口相同的尺寸和位置的框)作为其包含框.稍后将通过10.1包含块的定义来备份:

如果元素具有'position:fixed',则包含块由视口[...]建立

(如果您不熟悉视口的内容,则它是"用户查阅文档的屏幕上的窗口或其他查看区域".视口的尺寸是初始包含块的基础.整个HTML content(<html>,<body>等)驻留在视口定义的初始包含块中.)

因此,应用于它的<div class="nav">元素position: fixed;应该具有等于视口的包含块或初始包含块.

现在确定.nav元素属性的第一步已经完成,我们可以确定浏览器应该如何表现.

CSS2.1规范有这样的说法:

9.7'display','position'和'float'之间的关系 -否则,如果'position'的值为'absolute'或'fixed',则该框绝对定位,'float'的计算值为'none' ,并根据下表设置显示.框的位置将由"顶部","右侧","底部"和"左侧"属性以及框的包含块确定.

这基本上是告诉我们,对于绝对定位元素(position: fixed;或position: absolute;),任何float性质都被忽略,该<div>元件(其中包括)被设置为display: block;,与该元件根据其框定位偏移的值top,right,bottom,和/或left在组合使用初始包含块(视口).

9.3.2框偏移:'top','right','bottom','left' -如果一个元素的'position'属性的值不是'static',则称该元素被定位.定位元素生成定位框,根据四个属性布局:顶部,右侧,底部,左侧.

这只是重申<div class="nav">应根据其箱子偏移定位的事实.

虽然它在几个地方说如果两个相反的偏移值是auto,那么它们被设置为零,CSS2.1似乎没有指定如何定位具有两个left和right零值的元素的情况.但是,CSS Box对齐模块Level 3确实提到该值设置为"start",其定义为:

将对齐主体与对齐容器的起始边缘齐平对齐.

这应该意味着元素位于包含块的左上角,对于position: fixed;元素,它应该与视口相同.但是,我们可以看到,对于所有主流浏览器,情况并非如此.无主流浏览器似乎设置position: fixed;包含块到视口的通过规范的指示.相反,他们都表现得好像行为应该在position: fixed;和之间相同position: absolute;.

总而言之,当您在规范自己的话中有这么多证据时,答案是明确的:position: fixed;元素应该有一个设置到视口的包含块.同样清楚的是,供应商都决定以他们自己的方式填写一个模糊的部分规范,与此声明相冲突或完全无视此声明.最有可能发生的事情是,一个浏览器实现了他们的解释(IE7是第一个支持position: fixed;,我相信,随后很快就会被Firefox 2.0支持),其余的跟随.

归档时间：	10 年，7 月前
查看次数：	5615 次
最近记录：	10 年，7 月前