我想在中间放置一个封面图片,在底部放置旋转木马,在z-index
顶部的旋转木马上的标题(我想用项目背景更改)。
提醒顶部 - >底部=>标题 - >封面图片 - >项目(背景)
我该怎么办?
基于bootstrap框架的类
HTML
<div class="cover-image"></div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active bg bg1">
<div class="container caption">...(p1)</div>
</div>
<div class="item bg bg2">
<div class="container caption">...(p2)</div>
</div>
<div class="item bg bg3">
<div class="container caption">...(p3)</div>
</div>
</div>
</div>
答案 0 :(得分:0)
好吧,你在div中冷却所有这些,然后使用position:relative
;在div上并将css
应用于标题。
.caption
{
position: absolute;
top: 0;
}