0

请我想让一个 div 的孙子出现在文档中所有内容的前面，而该 div 的其他子孙可能会更改顺序。

我尝试更改所有内容的 z-index，但它不起作用。

请帮忙。问题是字幕在圆圈后面，我希望它们在圆圈前面。这是代码的结果

otekit.com

这是 html，我希望具有“carousel-captions”类的 div 位于所有内容之上，甚至位于 img“circle-slider”之上，它位于具有类“的 div 内的图像之上”轮播字幕”。

<div id="carousel1" class="carousel slide main" data-ride="carousel">

        <div class="carousel-inner " role="listbox">

            <div class="item active">
                <div class="carousel-caption">
                    <h2>Header</h2>
                    <h3>Some text</h3>
                    <nav class="color-1 cl-effect-13 cl-effect-20 ">
                        <a href="#contact"><span data-hover="Quick Inquiry">Quick Inquiry</span></a>
                    </nav>           

                </div>
                <img src="img/slider/bg11.jpg" alt="First slide image" class="center-block slider-img">

            </div>
            <div class="item">
                <div class="carousel-caption">
                    <h2>Header</h2>
                    <h3>Some text</h3>
                    <nav class="color-1 cl-effect-13 cl-effect-20 ">                                                        
                        <a href="#contact"><span data-hover="Quick Inquiry">Quick Inquiry</span></a>
                    </nav>           

                </div>
                <img src="img/slider/bg7.jpg" alt="Second slide image" class="center-block slider-img">

            </div>
            <div class="item">
                <div class="carousel-caption">
                    <h2>Header</h2>
                    <h3>Some text</h3>
                    <nav class="color-1 cl-effect-13 cl-effect-20 ">
                        <a href="#contact"><span data-hover="Quick Inquiry">Quick Inquiry</span></a>
                    </nav>           

                </div>
                <img src="img/slider/bg22.jpg" alt="Third slide image" class="center-block slider-img">

            </div>
        </div>

        <img id="circle-slider" src="img/slider/circle.png" class="circle-slider img-responsive " alt="Placeholder image">

        <a class="left carousel-control"  href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" style="color: #ed1c3b; opacity: 0.5" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" style="color: #ed1c3b ; opacity: 0.5" aria-hidden="true"></span><span class="sr-only">Next</span></a>

        </div>

</div>

这是CSS

.carousel {
position: relative;
max-height: 600px;
overflow: hidden;
}


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


.carousel-inner > .item {
position: relative;
overflow: hidden;
}


.carousel-caption {
position: absolute;
right: 15%;
top: 30vw;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}


.circle-slider{
position: absolute;
bottom: -50%;
left: 50%;
z-index: 15;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
max-width:640px;
opacity: 0.5;
}
4

0 回答 0