如何定位在 div 背景图像后面？答案

【问题标题】：How can I positioning behind a div background images?如何定位在 div 背景图像后面？
【发布时间】：2020-02-03 12:48:39
【问题描述】：

我想第一次使用 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>

【问题讨论】：

如果您从圆中删除 z-index 和/或删除动画会发生什么：从 ahorn 中淡入？
如果我删除其中一个或两个，我的角将不再可见

标签： css z-index positioning

【解决方案1】：

只需从 .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>

【讨论】：

如果我从 .circle 中删除 z-index，.ahorn 将不再可见

【解决方案2】：

我现在就找到答案了。我必须向祖父元素（#top .center-box）添加一个位置：相对和一个z-index 10，父元素（.circle）一个z-index：initial和子元素（#ahorn） z 索引：-1。所以它工作正常。谢谢大家！

answer found here

【讨论】：