Css div overlapping is not occuring-CodePudding

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 >
  <div >
    <div >
      <div >
      </div>
      <div >
      </div>
      <div >
      </div>
      <div >
      </div>
      <div >
      </div>
      <div >
      </div>
    </div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >
      <div >
      </div>
      <div >
      </div>
      <div >
      </div>
      <div >
      </div>
      <div >
      </div>
      <div >
      </div>
    </div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >
      <div >
      </div>
      <div >
      </div>
      <div >
      </div>
      <div >
      </div>
      <div >
      </div>
      <div >
      </div>
    </div>
  </div>
</div>