位置:固定位置:固定:哪个浏览器正确？

Question

将固定元素定位在另一个固定元素中的行为在Chrome/Safari和Firefox中表现不同.

这个答案很好地解释了相对一个内部固定div 的预期行为,MDN对此很清楚:

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

我不明白的是Firefox正在使用固定div中的固定div.我期望的是,子元素在悬停时与包装器一起移动.

.wrapper, .header {
  position:fixed;
  width:320px;
}

.wrapper:hover{
  left:0px;
}
.wrapper{
  width:320px;
  height:100%;
  background:white;
  overflow:scroll;
  left:-200px;
  transition: all ease-out .3s;
}
ul {
  margin-top:120px;
}
 .header {
   background:rgba(255,255,255,0.9);
}

body{
  background:gray;

<div class="wrapper">
  <div class="header">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae vitae a, itaque commodi, odio et. Excepturi, obcaecati? Architecto repellendus omnis mollitia animi rem quasi at, odit aperiam voluptatibus voluptates earum!
  </div>
  <ul>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quam maiores, voluptas facere, iste quis iusto reiciendis delectus, quod blanditiis tempora. Earum voluptatum dicta quae, explicabo placeat at rerum assumenda!
    </li>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quam maiores, voluptas facere, iste quis iusto reiciendis delectus, quod blanditiis tempora. Earum voluptatum dicta quae, explicabo placeat at rerum assumenda!
    </li>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quam maiores, voluptas facere, iste quis iusto reiciendis delectus, quod blanditiis tempora. Earum voluptatum dicta quae, explicabo placeat at rerum assumenda!
    </li>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quam maiores, voluptas facere, iste quis iusto reiciendis delectus, quod blanditiis tempora. Earum voluptatum dicta quae, explicabo placeat at rerum assumenda!
    </li>
  </ul>
</div>

有什么想法吗？我正在寻找一种解决方法,以便在浏览器之间实现一致性.

编辑:更有趣？

添加这个以便在FF上出现更多故障:

.header:hover{
  height:200px;
}

在悬停时,它会触发重绘,然后FF重新计算元素的位置.

_{使用FF 46.0.1,Chrome 54.0.2840.71和Safari版本9.1.1(11601.6.17)进行测试.注意:我已经读过这个问题}

Answer 1

要查看所需行为的两种解决方法,请在水平线下方向下滚动.

11/18/16更新 - CSSWG回复我并说它应该创建一个新的堆叠上下文:

你是对的,这也应该被合并到定位规范中 - 现在反映出来.谢谢.

• 新的CSS位置规范差异

关于哪个浏览器是正确的:

fixed应始终相对于视口放置位置元素,特别position: fixed是在10.1.3中"通过视口"建立元素的包含块:

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

这个包含块正式称为"初始包含块".

9.3.1还说明了这一点,对于普通的非分页媒体(如下),

[...]对于手持,投影,屏幕,tty和tv媒体类型,该框相对于视口是固定的,滚动时不会移动.

您的代码中发生的是您left在悬停时更改父元素的属性值,并且您也期望子元素移动.但是,子元素(正确)不移动.

10.3.7说

为了计算静态位置,固定定位元素的包含块是初始包含块而不是视口.

(这里的静态位置表示元素放置在正常流中时的位置).

它还说:

[If]'left'和'right'是'auto'而'width'不是'auto',[...]将'left'设置为静态位置,否则将'right'设置为静态位置.然后解决'左'(如果'方向是'rtl')或'右'(如果'方向'是'ltr').

我相信,这解释了为什么子position: fixed元素最初设置为left: -200px;在其父元素内的位置position: static.

在这一点上,看起来你认为父left元素的新值应该移动子元素,我假设,要么是因为你期望新left属性被孩子继承(这不是多么left有效),或者你期望它重新流动文件,:hover我记得这不会发生; 浏览器只重新油漆上:hover,这不会改变文件流,但确实改变元素的外观(例如background-color,opacity,visibility: hidden;等等).

因此,重新绘制的元素不应该移动,除非有伪选择器在临时状态(如:hover)或游戏中的过渡/动画期间更改属性.

在这种情况下,Chrome和Safari似乎正在做一些不同于规范建议的事情; 它们要么导致完全重新流动,要么设置了从祖先position: fixed继承left属性的元素.根据Oriol下面链接的CSS工作组草案,如果你愿意,这似乎是在董事会之上.但是,在规范更新之前,它仍然是非标准行为.

• 长话短说,Chrome和Safari 现在都是错误的,但最终一旦规范更新,它们就会正确,Firefox将不得不更新其渲染行为.

让.headerdiv继承你的新left属性,因为Chrome就是这样做的,这就是你寻求的行为.我也调整.header了一点宽度,所以它不会覆盖滚动条.wrapper:

.wrapper, .header {
  position: fixed;
}

.wrapper:hover {
  left:0px;
}
.wrapper{
  width:320px;
  height:100%;
  background:white;
  overflow:scroll;
  left:-200px;
  transition: all ease-out .3s;
}
ul {
  margin-top:120px;
}
.header {
  background:rgba(255,255,255,0.9);
  left: inherit;
  width: 303px;
}

body{
  background:gray;
}

<div class="wrapper">
  <div class="header">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae vitae a, itaque commodi, odio et. Excepturi, obcaecati? Architecto repellendus omnis mollitia animi rem quasi at, odit aperiam voluptatibus voluptates earum!
  </div>
  <ul>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quam maiores, voluptas facere, iste quis iusto reiciendis delectus, quod blanditiis tempora. Earum voluptatum dicta quae, explicabo placeat at rerum assumenda!
    </li>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quam maiores, voluptas facere, iste quis iusto reiciendis delectus, quod blanditiis tempora. Earum voluptatum dicta quae, explicabo placeat at rerum assumenda!
    </li>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quam maiores, voluptas facere, iste quis iusto reiciendis delectus, quod blanditiis tempora. Earum voluptatum dicta quae, explicabo placeat at rerum assumenda!
    </li>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quam maiores, voluptas facere, iste quis iusto reiciendis delectus, quod blanditiis tempora. Earum voluptatum dicta quae, explicabo placeat at rerum assumenda!
    </li>
  </ul>
</div>