How can I positioning behind a div background images?

Question

I want to use z-index first time, and I have problem with it. I try to position the left leave (#ahorn) behind the .circle, but it appear just behind the text, not the background. How can I achieve this? The animation is secondary now, not so important yet. The positioning is my big problem and the primary requirement. 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>

what happends if you remove the z-index from circle and/or remove the animation: fadeIn from ahorn? — poashoas, Oct 05 '19 at 16:30
if I remove one of this, or both, my ahorn is not visible any more — Judit Nagy, Oct 05 '19 at 19:55

score 0 · Answer 1 · answered Oct 05 '19 at 18:40

Just Remove the z-index from .circle

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

if I remove z-index from .circle, .ahorn is not visible any more — Judit Nagy, Oct 05 '19 at 19:56

score 0 · Answer 2 · answered Oct 05 '19 at 20:38

I find the answer right now. I must add to the grand-parent element(#top .center-box) a position:relative, and a z-index 10, the parent element(.circle) a z-index:initial, and the child(#ahorn) a z-index:-1. So it's work fine. Thanks for all!

answer found here

How can I positioning behind a div background images?

2 Answers2