位置固定 - 不中断文档流

Question

我的 css 相当不错，我想我可以理解为什么大多数事情在前端开发时都会做他们所做的事情。但是我今天遇到一个问题，我不是很明白。

代码如下：

.nav-toggle {
  position: absolute;
  transform: translateY(50%);
}

.nav-open .nav-toggle:after {
  background: rgba(0, 0, 0, 0.5);
  content: '';
  display: block;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}

<span data-action="toggle-nav" class="action nav-toggle">
         <span>Menu</span>
</span>

这是一个fiddle：

https://jsfiddle.net/0vm962be/1/

这里是第二个 fiddle，转换被注释掉了。

https://jsfiddle.net/0vm962be/2/

所以你会看到不同之处。

因此，当父元素具有 .nav-open class。

然而，由于 1 行简单的代码（转换：translateY(50%)），这并没有发生，实际发生的是 fixed 元素就像一个绝对将元素定位在 .nav-toggle 内部，并且仅 100% 到达其父元素。

为什么对父元素的变换会对固定元素产生影响？我虽然 position: fixed; 无论如何都破坏了文档流。并且只听了window宽高。我需要了解为什么会这样。

任何建议都很好。链接到规格等？

Answer 1

哈哈，真有趣。不久前我遇到了同样的问题。

显然，这是 webkit 浏览器中的一个错误。参见：https://bugs.chromium.org/p/chromium/issues/detail?id=20574 如此处所述：

这意味着，不幸的是，这是行不通的。您可能可以尝试使用 flexbox 进行类似的操作，但是您甚至想要实现什么，仅从 fiddle.

我还不是 100% 清楚

In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.

这意味着固定定位会固定到变换后的元素，而不是视口。

Answer 2

使用 vh 和 vw 代替百分比： https://jsfiddle.net/93ybxgau/1/

.nav-open .nav-toggle:after {
  background: rgba(0, 0, 0, 0.5);
  content: '';
  display: block;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  z-index: 1;
}

位置固定 - 不中断文档流

Position fixed - not breaking out of document flow

html

css

frontend