Z-indexが、以下のCSSの背景画像

Question

で作業していない -

.competition .banner .image { 
    background: url("{{ STATIC_URL }}images/comp-banner.jpg") no-repeat; 
    display: inline-block; 
    position: relative; 
} 

そしてHTML - 私は、背景画像の上にdescriptionを置く方法を見つけ出すことはできません

<div class="banner"> 
     <span class='image'> 
     </span> 
    </div> 

    <div class="info"> 
     <div class="main-info"> 
      {{ competition.description }} 
     </div> 
    </div> 

。私はdiv、spanなどのZインデックスを設定しようとしましたが、何も動作していないようです。ここに背景画像の上にテキストをどのように置くのですか？

Answer 1

が、説明が内部main-infoですが...ただ...いくつかのtop、bottomを行うよりも、これはそれが必要

滞在する、それを行う必要があります...子供にメインのdivに position: relativeと position: absolute; z-index: 50を設定しました

.info { 
    background: url("{{ STATIC_URL }}images/comp-banner.jpg") no-repeat; 
    display: inline-block; 
    position: position absolute; 
} 
.main-info{ 
position: relative; z-index: 50; 
} 

    <div class="info"> 
     <div class="main-info"> 
      {{ competition.description }} 
     </div> 
    </div>