Z-지수는 다음과 같은 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을보다이 그것을해야

을 유지하기 위해서는 어떻게해야 ... 아이에게 주요 사업부에 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>