Z-指數不與背景圖像

工作對於下面的CSS -Z-指數不與背景圖像

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

和HTML -

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

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

我想不出如何把description的背景圖像的頂部。我試過設置所有的div's，span等的Z指數，但似乎沒有任何工作。我如何將文本放在背景圖片的頂部？

來源

2012-01-28 David542

描述是否有位置設置？ Z-index僅在元素設置爲某個位置時纔有效。 – Graham 2012-01-28 21:45:57

但說明裏面main-info ...設置position: relative到主分區和position: absolute; z-index: 50孩子......這應該這樣做，不僅僅是做一些top，bottom ...留在它應該

.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>

來源

2012-01-28 21:45:54 Alex

Z-指數不與背景圖像

回答

相關問題