如何在使用透视和变换时控制z-index？

Question

我读过很多关于z-index以及转换和透视如何破坏其背景的网页。我理解为什么我的代码不起作用，我不知道如何使其工作（或至少使用和替代）。

正如您在图像上看到的那样，下面的卡片正在覆盖选择菜单。

这是一个重现问题的片段：

.square { position: relative; width: 100%; padding-bottom: 100%; }
.square>* { position: absolute; width: 100%; height: 100%; }

/* flip */
/* u -> uncontroled / c -> controled */
.flip { perspective: 200em; }
.flip .front, .flip .back {
	-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;
	backface-visibility: hidden; position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
}
@supports (-webkit-transform-style: preserve-3d) or (-moz-transform-style: preserve-3d) or (transform-style: preserve-3d) {
	.flip .front, .flip .back { 
		-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; transition: 1s;
	}
}
/* -> horizontal */
.flip .front { z-index: 2; transform: rotateY(0deg); perspective: none;}
.flip .back { transform: rotateY(-180deg); }
.flip.u:hover .back, .flip.c.active .back { transform: rotateY(0deg); }
.flip.u:hover .front, .flip.c.active .front { transform: rotateY(180deg); }
/* -> vertical */
.flip.vertical .back { transform: rotateX(-180deg); }
.flip.vertical.u:hover .back, .flip.vertical.c.active .back { transform: rotateX(0deg); }
.flip.vertical.u:hover .front, .flip.vertical.c.active .front { transform: rotateX(180deg);  }

.test {
	position: absolute; top: 70%; left: 10%; background-color: green;
	height: 100px; width: 10px; z-index: 100;
}

<div style="width: 100px; background-color: black">
  <div class="square flip u">
    <div class="front" style="background-color: blue">
      Front
      <div class="test"></div>
    </div>
    <div class="back" style="background-color: red">Back</div>
  </div>
  <hr >
  <div class="square flip u">
    <div class="front" style="background-color: blue">Front</div>
    <div class="back" style="background-color: red">Back</div>
  </div>
</div>

我需要的是<div class="test">显示在所有人面前。像this一样。但是我不想在方形div上设置z-index，因为它们将被放置在flex布局Grid中。

有没有办法说一个元素总是在所有其他元素面前渲染？没有匹配者在哪里放置或者在堆栈上下文中发生了什么。

Answer 1

我所做的就是将带有.test的{​​{1}} div移到.square { position: relative; width: 100%; padding-bottom: 100%; } .square>* { position: absolute; width: 100%; height: 100%; } /* flip */ /* u -> uncontroled / c -> controled */ .flip { perspective: 200em; } .flip .front, .flip .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } @supports (-webkit-transform-style: preserve-3d) or (-moz-transform-style: preserve-3d) or (transform-style: preserve-3d) { .flip .front, .flip .back { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; transition: 1s; } } /* -> horizontal */ .flip .front { z-index: 2; transform: rotateY(0deg); perspective: none; } .flip .back { transform: rotateY(-180deg); } .flip.u:hover .back, .flip.c.active .back { transform: rotateY(0deg); } .flip.u:hover .front, .flip.c.active .front { transform: rotateY(180deg); } /* -> vertical */ .flip.vertical .back { transform: rotateX(-180deg); } .flip.vertical.u:hover .back, .flip.vertical.c.active .back { transform: rotateX(0deg); } .flip.vertical.u:hover .front, .flip.vertical.c.active .front { transform: rotateX(180deg); } .test { position: absolute; top: 30%; left: 3%; background-color: green; height: 100px; width: 10px; z-index: 10; }以外的翻转元素。

＆＃13;

＆＃13;

<div style="width: 100px; background-color: black">
  <div class="square flip u">
    <div class="front" style="background-color: blue">
      Front

    </div>
    <div class="back" style="background-color: red">Back</div>
  </div>
  <div class="test"></div>
  <hr>
  <div class="square flip u">
    <div class="front" style="background-color: blue">Front</div>
    <div class="back" style="background-color: red">Back</div>
  </div>
</div>

＆＃13;

numberDisplay.formatNumber

＆＃13;

＆＃13;

＆＃13;

Answer 2

过去几年没有人找到解决方案，所以这里是我最终做的（作为解决我的具体问题的替代方案）：

我只是使用 js 更改了所有子元素的 z-index，使那些首先具有更高 z-index 的子元素。

var targets = document.getElementsByClassName("invertChildZOrder");

var i;
for (i = 0; i < targets.length; i++) {
  target = targets[i];
  for (var i = 0; i < target.childNodes.length; i++) {
    var childNode = target.childNodes[i];
    if (childNode.className == "square flip u") {
      childNode.style.zIndex = "" + (target.childNodes.length - i);
    }        
  }
}

.square { position: relative; width: 100%; padding-bottom: 100%; }
.square>* { position: absolute; width: 100%; height: 100%; }

/* flip */
/* u -> uncontroled / c -> controled */
.flip { perspective: 200em; }
.flip .front, .flip .back {
  -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;
  backface-visibility: hidden; position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
@supports (-webkit-transform-style: preserve-3d) or (-moz-transform-style: preserve-3d) or (transform-style: preserve-3d) {
  .flip .front, .flip .back { 
    -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; transition: 1s;
  }
}
/* -> horizontal */
.flip .front { z-index: 2; transform: rotateY(0deg); perspective: none;}
.flip .back { transform: rotateY(-180deg); }
.flip.u:hover .back, .flip.c.active .back { transform: rotateY(0deg); }
.flip.u:hover .front, .flip.c.active .front { transform: rotateY(180deg); }
/* -> vertical */
.flip.vertical .back { transform: rotateX(-180deg); }
.flip.vertical.u:hover .back, .flip.vertical.c.active .back { transform: rotateX(0deg); }
.flip.vertical.u:hover .front, .flip.vertical.c.active .front { transform: rotateX(180deg);  }

.test {
  position: absolute; top: 70%; left: 10%; background-color: green;
  height: 100px; width: 10px; z-index: 100;
}

 <div class="invertChildZOrder" style="width: 100px; background-color: black">
  <div class="square flip u">
    <div class="front" style="background-color: blue">
      Front
      <div class="test"></div>
    </div>
    <div class="back" style="background-color: red">Back</div>
  </div>
  <hr >
  <div class="square flip u">
    <div class="front" style="background-color: blue">Front</div>
    <div class="back" style="background-color: red">Back</div>
  </div>
</div>

正如你想象的那样。这只能部分解决问题。如果按钮上的方块有另一个菜单，但这次是向上而不是向下，我们会遇到同样的问题。