Question

我对我的css非常好，我想我可以理解为什么大多数事情都会在前端开发时做他们所做的事情。但是我今天遇到了一个我不完全理解的问题。

下面是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

这是一个小提琴：

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

这是变换的第二个小提琴。

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

所以你会看到差异。

因此，当父元素具有 .nav-open 类时，我期望发生的是后者将是身体的100％宽度和身体的100％高度。

然而，由于1个简单的代码行（transform：translateY（50％）），这并没有发生，实际发生的是 fixed 元素就像一个绝对定位的元素.nav-toggle的内容只有100％给它的父级。

为什么父母的变换会对固定元素产生影响？我虽然 position：fixed; 打破了文档流程，无论如何。并且只听窗口宽度高度。我需要了解为什么会这样。

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

Answer 1

哈哈，这很有趣。不久前我也有同样的问题。

显然，这是webkit浏览器中的一个错误。请参阅：https://bugs.chromium.org/p/chromium/issues/detail?id=20574 如上所述：https://stackoverflow.com/a/2637267/2632061

这意味着，遗憾的是，这无法发挥作用。你可以试试类似于flexbox的东西，但是你甚至想要实现的目标，对我来说，这并不是100％清楚。

在HTML命名空间中，转换的除none之外的任何值导致创建堆叠上下文和包含块。该对象充当固定定位的包含块后代。

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

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

位置已修复 - 不会中断文档流程

2 个答案: