画像divの上にDIVを追加するcss

Question

画像の上にテキストを追加しようとしています。私はdivとz-indexに相対位置と絶対位置を追加しようとしました。誰もが意図したとおりに動作しない理由を知っていますか？

<div class="container banner bg-white"> 
 
     <div class="row"> 
 
     <div class="col-lg-12 banner-image" style="position: relative;z-index:-1;"> 
 
      <img src="http://7-themes.com/data_images/collection/3/4446673-blue-wallpapers.png" class="img-responsive"> 
 
     </div> 
 
     <div class="banner-box-outer" style="position: absolute;"> 
 
      <h1 class="text-dark-blue"> 
 
      Some text 
 
      <br> tittle 
 
      </h1> 
 
      <div class="banner-list"> 
 
      <ul class="list-group"> 
 
       <li class="list-group-item"> 
 
       <img src="https://" alt="Tick" class="banner-list-tick"> 1 point 
 
       </li> 
 
       <li class="list-group-item" style="display:inline;"> 
 
       <img src="https://" alt="Tick" class="banner-list-tick"> 1 point 
 
       </li> 
 
       <li class="list-group-item"> 
 
       <img src="https://" alt="Tick" class="banner-list-tick">1 point 
 
       <br><span style="font-size:12px; "> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;som e text</span> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

Answer 1

あなたは絶対に位置しようとしている要素の親にposition: relativeを追加しようとしています。これは、基本的に、その親に対してという絶対的な要素が配置されるように指示します。 のCss：

.container .row{ 
    position: relative; 
} 
.banner-box-outer{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
}