How to make carousel-caption appear on top? - html

Question

I have a simple bootstrap 4 carousel, I would like a carousel caption to appear on top instead of bottom something like this below.
update: HERE IS JSFIDLE WITH FULL CODE
carousel demo
Here is what I have tried so far
HTML
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="pull-left">My Gallery Title</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-caption">
<h3>Heading 1</h3>
</div>
<img src="https://placeimg.com/600/400/nature/1" alt="Los Angeles">
</div>
<div class="carousel-item">
<div class="carousel-caption">
<h3>Heading 2</h3>
</div>
<img src="https://placeimg.com/600/400/nature/2" alt="Chicago">
</div>
<div class="carousel-item">
<div class="carousel-caption">
<h3>Heading 3</h3>
</div>
<img src="https://placeimg.com/600/400/nature/3" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<div class="modal-footer">
<button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
<!--end modal-footer-->
</div>
<!--end modal-content-->
</div>
<!--end modal-dialoge-->
</div>
<!--end myModal-->>
</div>
CSS
.carousel-caption {
position: absolute;
right: 15%;
top: -42px;
left: 15%;
z-index: 999999999;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
}
Unfortunately, with this solution, my carousel caption disappear.
What do I need to do to get what I want?

Answer 1

change css of .carousel-caption
.carousel-item .carousel-caption {
position: static;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
working fiddle here

Answer 2

Change the value of top to 0. The carousel caption will move to top of your carousel exactly opposite to carousel indicators.
Try using the inspect element and check the position of your concern element.

Answer 3

Use property relative in div with class ".carousel-item"
.carousel-item{
position:relative;
}
.carousel-caption {
position: absolute;
top: 0;
left: 0;
width:100%;
text-align:center;
z-index: 999999999;
padding-top: 5px;
color: #fff;
}
Full working example in codepen:
https://codepen.io/anon/pen/bJygvj