Position a PNG image inside a div carousel - html

Question

After several searches I cannot find an example of what I want to do.
I have a carousel, and my mission is to place a png image in the carousel like this :
As you can see, the png exceed slightly from the top of the div
This is what i already tried : https://codepen.io/MehdiX/pen/jOEaJox?editors=1100
But is don't work, as you can see, when i make a negatif pixel, the borders of the png image are no longer visible.
I use position: absolute; on my png image, and position: relative; on the carousel div, but it doesn't seem to work. I do not know if I should act on the div of the carousel or that of the image (which is already in relative)
HTML :
<main id="home_part" class="row" role="main">
<article>
<div id="carousel_presentation" class="col-md-12">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.pexels.com/photos/204993/pexels-photo-204993.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="d-block w-100" alt="...">
<img src="https://retohercules.com/images/foto-png-online-8.png" class="women_png_sticky" alt="">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="col-md-12 text-center py-5">
<div class="container">
<h2 class="mb-3">Laissez-vous emporter par le bien-être !</h2>
<p class="lead">Échappez au stress du monde moderne et venez nous retrouver dans notre institut de soins. Vous y trouverez sérénité et bien-être dans un environnement calme et apaisant.</p>
</div>
</div>
</div>
</article>
</main>
#carousel_presentation {
font-family: main, "Palatino Linotype", "Book Antiqua", Palatino, serif;
padding: 0;
color: #565656;
background-color: #FFF989;
position:relative;
}
.women_png_sticky {
margin-top:-600px;
}
#carousel_presentation h2 {
font-size: 2rem;
text-transform: uppercase;
}
#media only screen and (max-width: 780px) {
#carousel_presentation h2 {
font-size: 1.5rem;
}
}
#media only screen and (max-width: 560px) {
#carousel_presentation h2 {
font-size: 1rem;
text-decoration: underline;
}
#carousel_presentation p {
font-size: 1rem;
}
}
And i would to know if exist a simple solution, like canvas in javascript, or CSS, to manage this type of positioning ?

Answer 1

You have in your carousel.scss in line 25 an overflow: hidden rule that's hiding the image.
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
#include clearfix();
}
You can make a more specific selector to overwrite the overflow:
div.carousel-inner { overflow: visible }
Check the fork in codepen: https://codepen.io/rafaelcastrocouto/pen/JjoOqXy?editors=1100