Pictures above the carousel

Question

I’m not able to put the images above the carousel, I’m trying to put my remaining content above the carousel but it’s not working, I tried everything, but it’s coming down. Follows the codes.

Index.php

        <div id="middle">
        <div class="row-fluid" id="conteudo">


              <div class="span6" id="esquerdo"> <img width="323px" height="434px" src="imagens/logo-middle.png" id="imgLogo">
            </div>
              <div class="span6" id="direito">
                <img src="imagens/img_min_1.png" id="min01">
                <img src="imagens/img_min_2.png" id="min02">
                <img src="imagens/img_min_3.png" id="min03">
              </div>

        </div>
                                <div id="myCarousel" class="carousel slide">

                                    <!-- Wrapper for Slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <!-- Set the first background image using inline CSS below. -->
                    <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
                    <div class="carousel-caption">
                        <h2>Caption 1</h2>
                    </div>
                </div>
                <div class="item">
                    <!-- Set the second background image using inline CSS below. -->
                    <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
                    <div class="carousel-caption">
                        <h2>Caption 2</h2>
                    </div>
                </div>
                <div class="item">
                    <!-- Set the third background image using inline CSS below. -->
                    <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
                    <div class="carousel-caption">
                        <h2>Caption 3</h2>
                    </div>
                </div>
            </div>

            </div>
        </div>

Stylo.css

#conteudo { height: 80vh; }
.carousel,
.item,
.active { height: 80vh;   z-index: -1; }
.carousel-inner { height: 100%; }
/* Background images are set within the HTML using inline CSS, not here */
.fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }

Answer 1

You are using the parameter z-index:-1 in class .active in your css. This causes the active object to fall below everything.

Answer 2

The solution to the problem was to add the carousel above the div#middle and add margin-top: -80vh; to climb the rest of the div#middle, then the code will stay this way.

Index.php

 <div id="myCarousel" class="carousel slide">

                                            <!-- Wrapper for Slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <!-- Set the first background image using inline CSS below. -->
                            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
                            <div class="carousel-caption">
                                <h2>Caption 1</h2>
                            </div>
                        </div>
                        <div class="item">
                            <!-- Set the second background image using inline CSS below. -->
                            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
                            <div class="carousel-caption">
                                <h2>Caption 2</h2>
                            </div>
                        </div>
                        <div class="item">
                            <!-- Set the third background image using inline CSS below. -->
                            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
                            <div class="carousel-caption">
                                <h2>Caption 3</h2>
                            </div>
                        </div>
                    </div>

                    </div>
                <div id="middle">
                <div class="row-fluid" id="conteudo">


                      <div class="span6" id="esquerdo"> <img width="323px" height="434px" src="imagens/logo-middle.png" id="imgLogo">
                    </div>
                      <div class="span6" id="direito">
                        <img src="imagens/img_min_1.png" id="min01">
                        <img src="imagens/img_min_2.png" id="min02">
                        <img src="imagens/img_min_3.png" id="min03">
                      </div>

                </div>
                </div>

and Style.css

#middle { margin-top: -80vh; height: 80vh; }
.carousel,
.item,
.active { height: 80vh;   z-index: -1; }
.carousel-inner { height: 100%; }
/* Background images are set within the HTML using inline CSS, not here */
.fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }