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-指数不与背景图像

回答

相关问题