Как я могу расположиться позади div фоновых изображений? - PullRequest
Новая
       33

Как я могу расположиться позади div фоновых изображений?

0 голосов
/ 05 октября 2019

Я хочу использовать z-index впервые, и у меня есть проблемы с ним. Я пытаюсь расположить левый отпуск (#ahorn) за кругом, но он появляется сразу за текстом, а не за фоном. Как мне этого добиться? Анимация теперь вторична, пока не так важна. Позиционирование - это моя большая проблема и главное требование. скриншот 

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

Ответы [ 2 ]

0 голосов
/ 05 октября 2019

Я нахожу ответ прямо сейчас. Я должен добавить к элементу grand-parent (#top .center-box) позицию: относительный и z-index 10, родительский элемент (.circle) z-index: initial и дочерний (#ahorn)z-индекс: -1. Так что все работает нормально. Спасибо за все!

ответ найден здесь

0 голосов
/ 05 октября 2019

Просто удалите z-index из .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>
...