如何将旋转木马放置到具有图像背景的响应性div中？

Question

我有一个链接到我的现场，这样你就可以看到我的问题是什么。我的问题是，我如何把我的旋转木马放在一个指定的地方在一个div？

我有一个响应的div，其中有一个图像，我希望旋转木马显示在图像的底部在div内。目前，旋转木马显示在div下面，我不知道如何让旋转木马在div中显示。我已经研究过了，但是没有任何东西能显示出我要找的东西。

HTML

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

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

        <label for="carousel-2" class="carousel-control prev control-3">‹</label>
        <label for="carousel-3" class="carousel-control next control-2">›</label>
        <label for="carousel-4" class="carousel-control prev control-1">‹</label>

        <label for="carousel-4" class="carousel-control next control-3">›</label>

        <label for="carousel-2" class="carousel-control next control-1">›</label>
        <label for="carousel-1" class="carousel-control prev control-2">‹</label>
        <label for="carousel-1" class="carousel-control next control-4">›</label>
        <ol class="carousel-indicators">
            <li>
                <label for="carousel-1" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-2" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-3" class="carousel-bullet">•</label>
            </li>
            <li>
                <label for="carousel-4" class="carousel-bullet">•</label>
            </li>
        </ol>
    </div>
</div>
<!--end carousel-->
<div class="responsive">
    <img class="image-fluid" src="assets/Inner_Section_Two.jpg"/>
  </div>

  <div class="responsive">
    <img class="image-fluid" src="assets/Travel.jpg"/>
  </div>

  <div class="responsive">
    <img class="image-fluid" 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);
}

这里是一张我希望旋转木马成为安放的照片

我尝试过在响应的div中插入单独的div，但是它只会使图像变大。

这里有一个指向现场的链接

Answer 1

将两者放在1 div中，并给出父div的相对位置。而孩子的位置是绝对的。那就用旋转木马。

有些事情是这样的

 <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>

这将解决你的问题