如何防止添加转换的定位元素作为文档流的一部分添加？

Question

你可以在这里看到一个互动的例子。我希望添加transform: translate的蓝色div位于红色div下面，但不需要滚动(因此不属于文档流的一部分)。(我想将蓝色div动画化，使其出现在红色的div前面，但由于它是文档流的一部分，所以不能正确地显示它)。

为什么添加transform属性立即将不再是文档流一部分的position: absolute元素转换为文档流的一部分？

谢谢!

​

*,
 ::before,
 ::after {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.h-96 {
  height: 24rem;
}

.w-96 {
  width: 24rem;
}

.translate-y-full {
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
}

.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}

.bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}

<div class="relative h-96 w-96 overflow-y-scroll bg-yellow-400">
  <div class="absolute inset-0 bg-red-400">
    <div class="absolute inset-0 translate-y-full bg-blue-400"></div>
  </div>
</div>

​

  [1]: https://play.tailwindcss.com/xDKID0dPV1

Answer 1

我不知道您为什么要嵌套绝对定位的元素，但是下面是我如何在不了解您的基本原理的情况下(为这段代码进行缩放)。

​

:root {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --height: 8rem;
  --width: 8rem;
}

.relative {
  position: relative;
  overflow: hidden;
}

.absolute {
  position: absolute;
}

.inset-0 {
  top: 0px;
  right: -17px;
  bottom: -17px;
  left: 0px;
  overflow: auto;
}

.h-96 {
  height: var(--height);
}

.w-96 {
  width: var(--width);
}

.translate-y-full {
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.bg-yellow-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
}

.bg-red-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}

.bg-blue-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
}

<div class="relative h-96 w-96 bg-yellow-400">
  <div class="absolute inset-0 bg-red-400">
    <div class="absolute inset-0 bg-blue-400 translate-y-full"></div>
  </div>
</div>

​