I am looking for a way to make box2 appear behind box1.
One solution is to use position: relative; in the .box1 class.
However, this causes another issue in my project.
Is there a way to display .box2 behind .box1 without using position: relative; in .box1?
.main {
height: 100%;
}
#box1 {
background: red;
height: 200px;
width: 100px;
z-index: 999;
}
#box2 {
position: relative;
padding-top: 100px;
padding-bottom: 79px;
color: white;
margin-top: -200px;
margin-left: 110px;
background: black;
heigth: 200px;
width: 100px;
z-index: 1;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
animation-name: slideInLeft;
}<div class="main">
<div id="box1">
</div>
<div id="box2" class="animated slideInLeft">
Some text
</div>
</div>