Добавление текста выше изображения

Question

Я хочу добавить текст через изображение с помощью css. Я использую bootstrap. Мне не нужно использовать фоновое изображение.

<div id="myCarousal" class="carousal slide"> 
      <div class="carousal-inner"> 
      <div class="item active"> 
       <img src="img/cr1.jpg"> 
       <div class="container active"> 
        <div class="carousal-caption"> 
        <h1> Quiz </h1> 
        <p> Want to be part of it..</p> 

        <p> <a href="#" class="btn btn-primary btn-large">Sign Up Today</a></p> 

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

CSS-выглядит следующим образом ..

.carousel-caption{ 
    z-index:10; 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
} 
.carousel-inner > .item > img{ 
    position: relative; 
    top: 50px; 
    /*left: 0;*/ 
    min-width: 100%; 
    height: auto; 
} 
.carousel-inner > .item{ 
    height: 500px; 
} 

Пожалуйста, помогите мне исправить это.

Answer 1

Попробуйте добавить z-индексы для каждого элемента. На всякий случай, мы добавляем Z-индекс для всего внутри .carousel титрами, только чтобы избежать какой-то шанс у вас есть некоторые Z-индекс где

.carousel-inner .item img{ 
    position: relative; 
    top: 50px; 
    /*left: 0;*/ 
    min-width: 100%; 
    height: auto; 
    z-index:0; 
} 
.carousel-caption{ 
    z-index:1; 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
} 
.carousel-caption *{ 
    z-index:1000; 
    position: relative; 
}