I have a link to my live site so you can see what my issue is. My question is how can I place my carousel into a specified place in a div?

I have a responsive div with a image in it and I want the carousel to show at the bottom of the image within the div. At the moment the carousel shows below the div and I can't figure out how to get the carousel to show within the div. I've researched but there isn't anything out there that show exactly what I'm looking for.

HTML

<div >
    <img  src="assets/Header.jpg"/>
  </div>
<div >
    <img  src="assets/Carousel_BG_Image.jpg"/>
  </div>
<!--carousel-->

<div >
    <div >
        <input  type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
        <div >
            <img  src="assets/Carousel_Image_1.png">
        </div>
        <input  type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
        <div >
            <img  src="assets/Carousel_Image_2.png">
        </div>
        <input  type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
        <div >
            <img  src="assets/Carousel_Image_1.png">
        </div>
        <input  type="radio" id="carousel-4" name="carousel" aria-hidden="true" hidden="">
        <div >
            <img  src="assets/Carousel_Image_2.png">
        </div>
        <label for="carousel-" >›</label>

        <label for="carousel-2" >‹</label>
        <label for="carousel-3" >›</label>
        <label for="carousel-4" >‹</label>

        <label for="carousel-4" >›</label>

        <label for="carousel-2" >›</label>
        <label for="carousel-1" >‹</label>
        <label for="carousel-1" >›</label>
        <ol >
            <li>
                <label for="carousel-1" >•</label>
            </li>
            <li>
                <label for="carousel-2" >•</label>
            </li>
            <li>
                <label for="carousel-3" >•</label>
            </li>
            <li>
                <label for="carousel-4" >•</label>
            </li>
        </ol>
    </div>
</div>
<!--end carousel-->
<div >
    <img  src="assets/Inner_Section_Two.jpg"/>
  </div>

  <div >
    <img  src="assets/Travel.jpg"/>
  </div>

  <div >
    <img  src="assets/Footer.jpg"/>
  </div>

CSS

/* carousel */
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

.carousel {
    position: relative;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
    margin-top: 0px;
}

.carousel-inner {
    position: center;
    overflow: hidden;
    width: 100%;
}

.carousel-open:checked   .carousel-item {
    position: static;
    opacity: 100;
}

.carousel-item {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}

.carousel-item img {
    position: center;
    display: block;
    height: auto;
    max-width: 100%;
}

.carousel-control {
    background: rgba(0, 0, 0, 0.28);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: none;
    font-size: 40px;
    height: 40px;
    line-height: 35px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    cursor: pointer;
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    text-align: center;
    width: 40px;
    z-index: 10;
}

.carousel-control.prev {
    left: 2%;
}

.carousel-control.next {
    right: 2%;
}

.carousel-control:hover {
    background: rgba(0, 0, 0, 0.8);
    color: #aaaaaa;
}

#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3,
#carousel-4:checked ~ .control-4 {
    display: block;
}

.carousel-indicators {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 2%;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
}

.carousel-indicators li {
    display: inline-block;
    margin: 0 5px;
}

.carousel-bullet {
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 35px;
}

.carousel-bullet:hover {
    color: #aaaaaa;
}

#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet,
#carousel-4:checked ~ .control-4 ~ .carousel-indicators li:nth-child(4) .carousel-bullet {
    color: #428bca;
}

#title {
    width: 100%;
    position: absolute;
    padding: 0px;
    margin: 0px auto;
    text-align: center;
    font-size: 27px;
    color: rgba(255, 255, 255, 1);
    font-family: 'Open Sans', sans-serif;
    z-index: 9999;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}

Here a photo of where I would like the carousel to be placement

I've tried inserting the separate div within the responsive div but it just makes the images larger.

Here's a link to the live site

CodePudding user response：

put both in 1 div and give the parent div position relative. and the child div position absolute. then use carousel.

somoething like this

 <div position-relative>
    
    <div position-absolute width-100% top-0 right-0>
    img/background this div will cover the whole parent div 
and it will be absolute so whatever you put after this div will overlap with this div.
    </div>
    
    <div carousel>
    put your carousel here it will overlap your bg.
    </div>
    
    </div>

this will solve your problem