javascript - z-index 在 firefox 中不能正常工作

Question

我创建了简单的 CSS3 动画，但是 z-index 在 firefox 中不能正常工作的问题，绿色框必须堆叠在道路的顶部但是在 firefox 浏览器中，所以我想了解为什么这个问题是出现，如何解决？

body{
	margin:0;
	color:#444;
	font:300 18px/18px Roboto, sans-serif;
    text-align:center;
}
.element {
    width: 320px;
    height:100px;
    position: absolute;
    z-index: 50;
    left: 50%;
    margin-left:-160px;
    top: 50%;
    background-color:#00fb69;
             
}
@-moz-keyframes animation {
    0% {
        transform:scale(.95,.95) translateY(0px);
    }

    100% {
        transform: scale(.10,.10) translateY(-800px);
    }
}

@keyframes animation {
    0% {
        transform:scale(.95,.95) translateY(0px);
    }

    100% {
        transform: scale(.10,.10) translateY(-800px);
    }
}
.road-wrap{
    -webkit-perspective:160px;
    perspective:160px;
}
.road-wrap .road{
    margin-top:-360px;
    -webkit-transform:rotateX(80deg);
    transform:rotateX(80deg);
}
.road-wrap .lane-wrap{
    -webkit-animation:steer 4s linear infinite;
    animation:steer 4s linear infinite;
    position:relative;
    z-index:-1;
}
.road-wrap .lane{
	width:25px;
	margin:auto;
}
.road-wrap .lane>div{
	width:100%;
	margin:auto;
	margin-top:30px;
	margin-bottom:30px;
    position:relative;
	background-color:#444;
	-webkit-animation:lane 10s linear reverse infinite;
	animation:lane 10s linear reverse infinite;
}
.road-wrap .lane>div:nth-child(1){height:15px}
.road-wrap .lane>div:nth-child(2){height:20px}
.road-wrap .lane>div:nth-child(3){height:30px}
.road-wrap .lane>div:nth-child(4){height:50px}
.road-wrap .lane>div:nth-child(5){height:40px}
.road-wrap .lane>div:nth-child(6){height:50px}
.road-wrap .lane>div:nth-child(7){height:40px}
.road-wrap .lane>div:nth-child(8){height:50px}
.road-wrap .lane>div:nth-child(9){height:30px}
.road-wrap .lane>div:nth-child(10){height:20px}
.road-wrap .lane>div:nth-child(11){height:15px}
@-webkit-keyframes lane{
	0%{
        -webkit-transform:translateY(320px);
        transform:translateY(320px);
	}
	100%{
        -webkit-transform:translateY(-160px);
        transform:translateY(-160px);
	}
}
@keyframes lane{
	0%{
        -webkit-transform:translateY(320px) scale(.60,.60);
        transform:translateY(320px) scale(.60,.60);
	}
	100%{
        -webkit-transform:translateY(-160px) scale(.80,.80);
        transform:translateY(-160px) scale(.80,.80);
	}
}

@media(max-width:768px) {
.element{
    width:150px;
    margin-left:-75px;
}
}
@media (min-width: 768px){
    .element{
    width:250px;
    margin-left:-125px;
}
}

<div class="loading-screen">
    <div class="element">
    </div>
    <div class="road-wrap">
        <div class="road">
            <div class="lane-wrap">
                <div class="lane">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

只需放置 <div class="element">在 <div class="road-wrap"> 之后在代码中。