Как я могу сложить абсолютно позиционированный элемент между детьми и сестрами элемента? ⇐ Html

[Anonymous]

Я использую пакет Vue-slick-carousele. < /p>
У меня есть три основных элемента, с которыми я хочу взаимодействовать. Первый-это изображение с персонажем с классом Slide__person , вторая-это текст с классом Slide__Text и изображением с облаком с баннером класса __slider-cloud .
Мне нужен текст, чтобы перекрывать облако, и облако, и, в свою очередь, перекрывает изображение с человеком. Слайдер < /p>
Я хочу достичь чего -то подобного. < /p>

Код: Выделить всё

.banner__slider-cloud {
z-index: 1;
}

.slide__text {
z-index: 2;
}

.slide__person {
z-index: 0;
}

Я пробовал разные параметры, взаимодействовал со свойством z-index , попытался применить свойство , но я не смог решить эту проблему
Вы также можете увидеть мой код в онлайн-песочнице код и ящика

Код: Выделить всё

import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
// optional style for arrows & dots
import "vue-slick-carousel/dist/vue-slick-carousel-theme.css";

export default {
name: "HelloWorld",

components: { VueSlickCarousel },
};









[img]https://www.wikihow.com/images/6/61/Draw-a-Cartoon-Man-Step-15.jpg[/img]
              />

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aliquam architecto, corporis deserunt distinctio dolor dolores
ea ex hic iste magnam nihil optio perferendis perspiciatis




[img]https://www.wikihow.com/images/6/61/Draw-a-Cartoon-Man-Step-15.jpg[/img]
              />

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aliquam architecto, corporis deserunt distinctio dolor dolores
ea ex hic iste magnam nihil optio perferendis perspiciatis




[img]../assets/cloud.png[/img]






img {
max-width: 100%;
}

.slick-slide > div {
display: flex;
justify-content: center;
}

.slide {
max-width: 500px;
border: 2px solid orange;
padding: 1rem;
}

.slide .slide__text {
border: 2px solid green;
padding: 8px;
}

.banner__slider-cloud {
border: 1px solid;
max-width: 960px;
margin: auto;
position: absolute;
right: 0;
left: 0;
top: 5%;
}

< /code>


img {
max-width: 100%;
}

.slick-slide>div {
display: flex;
justify-content: center;
}

.slide {
max-width: 500px;
border: 2px solid orange;
padding: 1rem;
}

.slide .slide__text {
border: 2px solid green;
padding: 8px;
}

.banner__slider-cloud {
border: 1px solid;
max-width: 960px;
margin: auto;
position: absolute;
right: 0;
left: 0;
top: 5%;
}< /code>





[img]https://www.wikihow.com/images/6/61/Draw-a-Cartoon-Man-Step-15.jpg[/img]


Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Aliquam architecto, corporis deserunt distinctio dolor dolores ea ex hic iste magnam nihil optio perferendis perspiciatis



[img]https://via.placeholder.com/500[/img]

Подробнее здесь: https://stackoverflow.com/questions/750 ... -sibling-e