Css div overlapping is not occuring

Question

i have tried to overlap the front and back div using the top function in css, it isnt working, what is the solution to this? These two are present within the cube div in the html code bellow are the css and html code. Can you also tell what i wrote wrong. By overlapping i mean putting the 2 divs over each other

 :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

There are a couple of ways to fix this, but I'll go with the simplest one.

On your .front class in CSS, you also need to specific position: absolute;

This will allow both elements to position themselves the same way within the parent and should easily fix the issue you seem to be having.

 :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

You just forgot the unit (vh) in back's top style. Try the following code:

 :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>