我想第一次使用z-index，但遇到了问题。我尝试将左假（#ahorn）放在.circle后面，但它出现在文本后面，而不是背景后面。我该如何实现？动画现在是次要的，还不那么重要。定位是我的大问题，也是首要要求。screenshot
/* NOTE: top */
#top {
background: url(../img/top.jpg) bottom left no-repeat;
min-height: 700px;
text-align: center;
color: #fff;
display: flex;
justify-content: flex-end;
align-items: center;
}
.circle { /* NOTE: kellenek még a falevelek */
float: right;
background: #FDAB3B;
width: 500px;
height: 500px;
margin: 20px auto;
border-radius: 50%;
border: 5px dashed #fff;
box-shadow: 0 0 0 10px #FDAB3B;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
}
/* NOTE: falevelek animáció */
#ahorn2 {
position: absolute;
top: -30px;
right: 0;
width: 150px;
opacity: 0;
animation: fadeIn 1s ease-in both;
}
#ahorn {
position: absolute;
top: 20px;
left: -50px;
width: 150px;
opacity: 0;
animation: fadeIn 1s ease-in both;
z-index: -1;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translate3d(0, -50%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}<section id="top">
<div class="center-box">
<div class="circle">
<div class="caption-text">
<h1>Őszi<br>specialitások</h1>
<p>sütőtökös pite<br>rebarbarás pite</p>
<a class="button" href="#">Rendelek</a>
</div>
<div id="ahorn2">
<img src="img/ahorn_2.svg" alt="">
</div>
<div id="ahorn">
<img src="img/ahorn.svg" alt="">
</div>
</div>
</div>
</section>只需从.circle删除z-index
<html>
<head>
<style>
#top {
background: url(../img/top.jpg) bottom left no-repeat;
min-height: 700px;
text-align: center;
color: #fff;
display: flex;
justify-content: flex-end;
align-items: center;
}
.circle {
/* NOTE: kellenek még a falevelek */
float: right;
background: #FDAB3B;
width: 500px;
height: 500px;
margin: 20px auto;
border-radius: 50%;
border: 5px dashed #fff;
box-shadow: 0 0 0 10px #FDAB3B;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.caption-text {
z-index: 10;
font-size: 30px;
}
/* NOTE: falevelek animáció */
#ahorn2 {
position: absolute;
top: -30px;
right: 0;
width: 150px;
opacity: 0;
animation: fadeIn 1s ease-in both;
}
#ahorn {
position: absolute;
top: 20px;
left: -50px;
width: 150px;
opacity: 0;
animation: fadeIn 1s ease-in both;
z-index: -10;
}
.button {
background-color: #742D4D;
color: #fff;
padding: 5px;
text-decoration: none;
border: 3px solid #fff;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translate3d(0, -50%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
</style>
</head>
<body>
<section id="top">
<div class="center-box">
<div class="circle">
<div class="caption-text">
<h1>Őszi<br>specialitások</h1>
<p>sütőtökös pite<br>rebarbarás pite</p>
<a class="button" href="#">RENDELEK</a>
</div>
<div id="ahorn2">
<img src="https://via.placeholder.com/200x200" alt="">
</div>
<div id="ahorn">
<img src="https://via.placeholder.com/200x200" alt="">
</div>
</div>
</div>
</section>
</body>
</html>我现在找到答案了。我必须在祖父母元素（#top .center-box）中添加position：relative和z-index 10，在父元素（.circle）中添加z-index：initial和child（#ahorn） z索引：-1。这样就可以了。谢谢大家！