Как я могу поместить div над фоновым изображением в bootstrap

Question

Я хочу поместить маленький div этого размера col-xs-3 поверх фонового изображения col-xs-12, но он продолжает толкать его прямо под изображение, а не поверх него.

Вот мой код ...

HTML:

<div class="hero-container"> 
      <div class="row-fluid"> 
      <div class="span12"> 
       <div class="image wow bounceInUp"><img class="bg-image" src="hero.jpg"> 
       <div class="col-xs-3 pull-right contact-menu"> 
        <ul> 
        <li>Phone: xxxx xxx xxx</li> 
        <li>Email: x.xxxxx@xxxxx.com</li> 
        </ul> 
       </div> 
       </div>  
       <div class="caption post-content wow bounceInUp"> 
        <h1>UX Design & Development</h1> 
       </div> 

      </div> 
      </div> 
    </div> 

CSS

.bg-image { 
    position: relative; 
    width: 100%; 
    opacity: 0.75; 
    background-size: cover; 
    src: url(hero.jpg); 
    z-index: 0; 
} 

.hero-container{ 
    position:relative; 

} 

.post-content { 
    top:-10px; 
    left:40px; 
    position: absolute; 
    font-size: 2.5vw; 
    text-align: center; 
} 

.contact-menu { 
    background-color: #d6d6d6; 
    padding: 15px; 
    display: block; 
    z-index: 3; 
} 

Answer 1

Является ли это то, что вы пытаетесь сделать?
Посмотрите этот Fiddle.

<div class="row-fluid"> 
     <div class="span12"> 
      <div class="caption post-content wow bounceInUp"> 
       <h1>UX Design & Development</h1> 
      </div> 

      <div class="col-md-4 col-sm-6 col-xs-12 image wow bounceInUp block bg-image "> 
       <div class="col-md-7 col-xs-8 pull-right contact-menu borders"> 
        <ul> 
         <li>Phone: xxxx xxx xxx</li> 
         <li>Email: x.xxxxx@xxxxx.com</li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>