I am currently utilizing the vue-slick-carousel package to enhance my website.
Within this carousel, there are three key elements that I need to interact with. The first element is an image containing a character identified by the class slide__person. The second element is a text with the class slide__text, and the third element is an image of a cloud with the class banner__slider-cloud.
My requirement is for the text to overlay the cloud image, which in turn should overlap the picture of the person.
The cloud must maintain its static position and cannot be adjusted within the slider.
To achieve this desired layout, I have set up the following z-index values:
.banner__slider-cloud {
z-index: 1;
}
.slide__text {
z-index: 2;
}
.slide__person {
z-index: 0;
}
Despite trying various solutions, modifying the z-index property, testing different positioning properties, I have not been able to resolve this issue.
If you wish to view my code, please check out the online sandbox through this link: codesandbox
<script>
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 },
};
</script>
<template>
<div class="lending">
<main class="banner">
<div class="banner__slider">
<VueSlickCarousel :arrows="true" :dots="true">
<div class="slide">
<div>
<img
class="slide__person"
src="https://www.wikihow.com/images/6/61/Draw-a-Cartoon-Man-Step-15.jpg"
/>
<p class="slide__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aliquam architecto, corporis deserunt distinctio dolor dolores
ea ex hic iste magnam nihil optio perferendis perspiciatis
</p>
</div>
</div>
<div class="slide">
<div>
<img
class="slide__person"
src="https://www.wikihow.com/images/6/61/Draw-a-Cartoon-Man-Step-15.jpg"
/>
<p class="slide__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Aliquam architecto, corporis deserunt distinctio dolor dolores
ea ex hic iste magnam nihil optio perferendis perspiciatis
</p>
</div>
</div>
</VueSlickCarousel>
<img class="banner__slider-cloud" src="../assets/cloud.png" />
</div>
</main>
</div>
</template>
<style>
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%;
}
</style>
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%;
}<div class="lending">
<main class="banner">
<div class="banner__slider">
<div class="slide">
<div>
<img class="slide__person" src="https://www.wikihow.com/images/6/61/Draw-a-Cartoon-Man-Step-15.jpg" />
<p class="slide__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto, corporis deserunt distinctio dolor dolores ea ex hic iste magnam nihil optio perferendis perspiciatis
</p>
</div>
</div>
<img class="banner__slider-cloud" src="https://via.placeholder.com/500" />
</div>
</main>
</div>