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>