html - 位置 :fixed within position:fixed: which browser is correct?

Question

在 Chrome/Safari 和 Firefox 中将固定元素放置在另一个固定元素内的行为不同。

This answer explains well the expected behavior对于相对的 div 内的固定 div，和 MDN is pretty clear对此:

Fixed Positioning Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page.

我不明白的是 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) 进行的测试。 注意:我已经阅读了 this question}

Answer 1

要查看您想要的行为的两个解决方法，请向下滚动到水平线下方。

---

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

You're right, this was supposed to be merged into the positioning spec as well - reflected now. Thanks.

• New CSS Position specification diff

---

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

fixed 位置元素应始终相对于视口(viewport)放置，特别是position: fixed 元素的包含 block 已建立"by the viewport"在 10.1.3 中:

If the element has 'position: fixed', the containing block is established by the viewport [...]

这个包含 block 正式称为“初始包含 block ”。

9.3.1也支持这一点，对于普通的非分页媒体(像这样)，

[...] In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and does not move when scrolled.

您的代码中发生的事情是，您正在更改鼠标悬停时父元素的 left 属性的值，并且您希望子元素也移动。但是，子元素(正确地)没有移动。

10.3.7说

For the purposes of calculating the static position, the containing block of fixed positioned elements is the initial containing block instead of the viewport.

(此处的静态位置表示元素放置在正常流中时的位置)。

它还说:

[If] 'left' and 'right' are 'auto' and 'width' is not 'auto', [...] set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').

我相信，这解释了为什么子 position: fixed 元素最初设置为 left: -200px; 如果它在父元素中是 position: static。

在这一点上，您似乎认为父元素的新 left 值应该移动子元素，我假设是因为您期望新的 left 属性由 child 继承(这不是 left 的工作方式)，或者您希望它重新流动文档，这在 上不会发生:我记得悬停；浏览器仅在 :hover 上重新绘制，这不会改变文档流，但会改变元素的外观(例如 background-color、不透明度、可见性:隐藏；等)。

所以...重新绘制的元素不应移动，除非有伪选择器在临时状态(如 :hover)或正在播放的过渡/动画期间更改属性。

在这种情况下，Chrome 和 Safari 似乎在做一些与规范建议不同的事情；它们要么导致完全重流，要么将 position: fixed 元素设置为继承祖先的 left 属性。根据CSS Working Group draft，如果您愿意的话，这似乎是高于董事会的。由下面的 Oriol 链接。但是，在更新规范之前，它仍然是非标准行为。

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

---

使 .header div 继承您的新 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>