title: Bootstrap carousel fixed position
body: <p>I want to make my bootstrap carousel slider to stay fixed on the top, so when I scroll down, I want the content below to cover the carousel slider and not the carousel to move up along with the other content. It's a normal Bootstrap Carousel slider. </p>
  
  <pre><code>    &lt;div class="carousel slide" data-ride="carousel" id="carousel-ex"&gt;
  &lt;ol class="carousel-indicators"&gt;
  &lt;li data-target="#carousel-ex" data-slide-to="0" class="active"&gt;&lt;/li&gt;
  &lt;li data-target="#carousel-ex" data-slide-to="1"&gt;&lt;/li&gt;
  &lt;li data-target="#carousel-ex" data-slide-to="2"&gt;&lt;/li&gt;
  &lt;/ol&gt;
  
      &lt;div class="carousel-inner"&gt;
      &lt;div class="item active"&gt;
      &lt;img src="pics/cheese_and_biscuits.jpg" alt="image"&gt;
      &lt;div class="carousel-caption"&gt;
      &lt;h2&gt;Djathi Shajshet!&lt;/h2&gt;
      &lt;p&gt;Djathi paragraf&lt;/p&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
      &lt;img src="pics/cheese.jpg" alt="image"&gt;
      &lt;div class="carousel-caption"&gt;
      &lt;h2&gt;Djathi Shajshet!&lt;/h2&gt;
      &lt;p&gt;Djathi paragraf&lt;/p&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
      &lt;img src="pics/cheeseboard.jpg" alt="image"&gt;
      &lt;div class="carousel-caption"&gt;
      &lt;h2&gt;Djathi Shajshet!&lt;/h2&gt;
      &lt;p&gt;Djathi paragraf&lt;/p&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;a href="#carousel-ex" class="left carousel-control" data-slide="prev"&gt; &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt; &lt;/a&gt; &lt;a href="#carousel-ex" class="right carousel-control" data-slide="next"&gt; &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt; &lt;/a&gt;&lt;/div&gt; &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.carousel {
    position: relative;
  }
  .carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .carousel-inner &gt; .item {
    display: none;
    position: relative;
    -webkit-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
  }
  </code></pre>