SO callout over carousel

HTML

<!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide">
      <div class="carousel-inner">
        <div class="item active"><img src="http://placehold.it/1500x550" alt=""></div>
        <div class="item"><img src="http://placehold.it/1500x550" alt=""></div>
        <div class="item"><img src="http://placehold.it/1500x550" alt=""></div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div><!-- /.carousel -->

	<!-- Callouts
	================================================== -->
	<div class="container callouts">
		<div class="row">
			<div class="span4">
				blabla
			</div>
			<div class="span4">
				blabla
			</div>
			<div class="span4">
				blabla
			</div>
		</div>
	</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;
}
/* HOME
	-------------------------------------------------- */
	.callouts {
    position:relative;
		display:block;
		margin-top: -150px;
		z-index: 999999999999999;
}
	
	.callouts .row .span4 {
		background-color: yellow;
		height: 310px;
	}