Despite my efforts, I have been unable to find an example of what I am trying to achieve. I have a carousel and my goal is to insert a PNG image into the carousel in such a way that it slightly exceeds the top of the div like this:
https://i.sstatic.net/M0jSC.jpg
As you can see, the PNG image slightly protrudes from the top of the div
I have already attempted the following: https://codepen.io/MehdiX/pen/jOEaJox?editors=1100
However, it does not work as expected. When I use a negative pixel value, the borders of the PNG image are no longer visible.
I have applied 'position: absolute;' to my PNG image and 'position: relative;' to the carousel div, but it does not seem to work. I am unsure whether I should focus on the div of the carousel or the image itself (which is already 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;
}
}
Is there a simple solution, like using canvas in JavaScript or CSS, to handle this type of positioning?