Question

我想我清楚地问了我的问题。想象一下：

.box {
  width: 100%;
  height: 200px;
  overflow: auto;
  background: red;
  transition: transform .3s cubic-bezier(.09, .68, 0, .99);
}
.box:after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all .3s;
}
.box--to-right {
  transform: translateX(300px);
}
.box--to-right:after {
  opacity: 1;
  visibility: visible;
}

<div class="box box--to-right">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

请参阅？固定位置:after pseudo将不会显示，但是当.box--to-right类应用于元素时，:after伪元素将以1不透明度显示！

那为什么呢？它不应该一切正常吗？

为了达到类似的效果，我知道我可以动画left而不是使用翻译变换，但我想知道为什么会发生这样的事情？

Answer 1

此行为似乎符合规范：

6 The Transform Rendering Model

对于布局由CSS框模型控制的元素，任何值   除none以外的转换导致创建两个a   堆叠上下文和包含块。该对象充当   包含固定位置后代的块。

换句话说，一旦你将变换应用到一个元素（就像你对.box所做的那样），任何固定的定位后代（比如你的伪元素），都开始使用变换后的元素作为包含块，而不是视口。

为什么变换会破坏位置的维度：固定？

1 个答案: