I want a grand grandchild of a to appear in front of everything

Question

Please I'd like to make a grand grandchild of a div appear in front of everything in the document, while other children and grandchildren of that div may be subject to change of order.

I tried changing the z-index of everything and it doesn't work.

Please help. The problem is that the captions are behind the circle and i want them to be in front of the circle. This is the result of the code

otekit.com

This is the html, i want the divs with the class "carousel-captions" to be on top of everything, even on top of the img "circle-slider", which is on top of the images inside the divs with the class "carousel-captions".

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

This is the 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;
}