如何将旋转木马放入具有图像背景的响应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

将两者放在一个div中，并给出父div的相对位置。子div位置是绝对的。那就用carousel

像这样的

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

这将解决你的问题