title: How to Bootstrap Carousel and Absolute Position
body: <p>I have an issue I can't figure out. I'm hoping for a CSS expert:)
  <a href="http://pensacolachiropracticspinalcenters.com/" rel="nofollow noreferrer">http://pensacolachiropracticspinalcenters.com/</a></p>
  
  <p>I've created a bootstrap carousel. The html blocks go like this.</p>
  
  <pre><code>&lt;div #HomeBannerPane&gt; (position:relative)
  &lt;div #home-carousel&gt;&lt;/div&gt;
  &lt;div #HomeBoxWrapper (position:absolute;)
  &lt;div #HomeBoxFirst&gt;&lt;/div&gt;(.homebox float:left)
  &lt;div #HomeBoxFirst&gt;&lt;/div&gt;(.homebox float:left)
  &lt;div #HomeBoxFirst&gt;&lt;/div&gt;(.homebox float:left)
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Actual CSS</p>
  
  <pre><code>/*Home Carousel and 3 Green Boxes*/
  #HomeBannerPane{position:relative; left:-16%;}
  /*#home-carousel{position:relative;}*/
  #HomeBoxWrapper{
  width: 75%;
  position:absolute;
  bottom:0px;
  left:16%;
  z-index:10;
  }
  .homebox{
  width:33%;
  float:left;
  max-height:340px;
  min-height:159px;
  padding-top:21px;
  padding-right:30px;
  padding-left:30px;
  padding-bottom:30px;
  overflow-x:hidden;
  overflow-y:hidden;
  color:#FFFFFF;
  }
  .homebox h2{margin-bottom:15px;}
  .homebox p{
  color:white;
  font-family: 'Source Sans Pro', sans-serif;
  font-size:13px;
  }
  
  #HomeBoxFirst{background:#7CBA3D;}
  #HomeBoxSecond{background:#43A140;}
  #HomeBoxThird{background:#008238;}
  </code></pre>
  
  <p>I have the bottom of #HomeBoxWrapper zeroed out to the bottom of the #HomeBannerPane which is where the Carousel fits into. #HomeBannerPane has a z-index to sit on top of the carousel.</p>
  
  <p>The problem I am having is when the slides rotate, it kicks the #HomeBoxWrapper and all three boxes down during the transition. I am completely stumped. I really need it to quit doing that. Any suggestions? </p>
  
  <p><img src="https://i.stack.imgur.com/sfkOY.jpg" alt="The Issue"></p>
  
  <p>Thanks</p>