Css div 重叠未发生

Question

我尝试使用 css 中的顶部 function 重叠前后 div，它不起作用，有什么解决方案？ 这两个存在于 html 代码的立方体 div 中，下面是 css 和 html 代码。 你能告诉我我写错了什么吗？ 通过重叠，我的意思是把 2 个 div 放在一起

 :root { --boxColor: #0ff7 } body { align-items: center; justify-content: center; display: flex; background-color: black; min-height: 100vh; font-size: 50px; perspective: 10px; }.scene { position: relative; transform-style: preserve-3d }.cube-container { perspective: 100px; perspective-origin: 50% 0%; }.cube { height: 100px; width: 100px; }.front { height: 100px; width: 100px; background: blue; opacity: 0.5; }.back { height: 100px; width: 100px; background: blue; opacity: 0.5; top: -100; position: absolute }

 <div class="scene"> <div class="cube-container"> <div class="cube"> <div class="front"> </div> <div class="back"> </div> <div class="top"> </div> <div class="bottom"> </div> <div class="left"> </div> <div class="right"> </div> </div> </div> </div>

Answer 1

有几种方法可以解决此问题，但我将使用最简单的方法 go。

在CSS中的 .front class 上，您还需要指定position: absolute;

这将允许 position 本身的两个元素在父级中以相同的方式进行，并且应该可以轻松解决您似乎遇到的问题。

 :root { --boxColor: #0ff7 } body { align-items: center; justify-content: center; display: flex; background-color: black; min-height: 100vh; font-size: 50px; perspective: 10px; }.scene { position: relative; transform-style: preserve-3d }.cube-container { perspective: 100px; perspective-origin: 50% 0%; }.cube { height: 100px; width: 100px; }.front { height: 100px; width: 100px; background: blue; opacity: 0.5; position: absolute }.back { height: 100px; width: 100px; background: blue; opacity: 0.5; position: absolute }

 <div class="scene"> <div class="cube-container"> <div class="cube"> <div class="front"> </div> <div class="back"> </div> <div class="top"> </div> <div class="bottom"> </div> <div class="left"> </div> <div class="right"> </div> </div> </div> </div>

Answer 2

您只是忘记了背面顶部样式的单位（vh）。 试试下面的代码：

 :root { --boxColor: #0ff7 } body { align-items: center; justify-content: center; display: flex; background-color: black; min-height: 100vh; font-size: 50px; perspective: 10px; }.scene { position: relative; transform-style: preserve-3d }.cube-container { perspective: 100px; perspective-origin: 50% 0%; }.cube { height: 100px; width: 100px; }.front { height: 100px; width: 100px; background: blue; opacity: 0.5; }.back { height: 100px; width: 100px; background: blue; opacity: 0.5; top: -100vh; position: absolute }

 <div class="scene"> <div class="cube-container"> <div class="cube"> <div class="front"> </div> <div class="back"> </div> <div class="top"> </div> <div class="bottom"> </div> <div class="left"> </div> <div class="right"> </div> </div> </div> </div>