어떻게 위치로 div를 이동할 수 있습니까? 내 사이트에서

Question

나는 이미지 위의 배경 및 제목 등의 이미지와 블록이 있습니다

:

HTML을 .block에 대한

<div class="block"> 
    <img src="someimage.png" /> 
    <div class="title">Some title</div> 
</div> 

CSS

.block { 
    position:relative; 
} 
.block img { 
    position:absolute; 
    top:0; 
    left:0; 
} 
.block .title { 
    margin-top:100px; 
    text-align:center; 
} 

요구 사항

• <div style='background-image:url(someimage.png)'>으로 <img>을 바꿀 수 없습니다. 반드시 b 전자 <img>
• .title는

를 기준으로해야합니다 그러나 문제는 - 절대 사업부는 제목을 숨 깁니다. . z-index을 가지고 노는 것은 단지 z-index이 상대적인 요소들과 작동하지 않기 때문에 아무 것도하지 않습니다. 그래서 내 질문 - 어떻게이 블록을 구성 할 수 있습니다. 모든 조언은 매우 감사 할 것입니다!

Answer 1

z-index은 relative과 작동합니다. 그냥 설정 .titlerelative (또는 그 부모가 relative 때문에 inherit)에와 z-index

http://www.w3.org/wiki/CSS/Properties/z-index

Only works on positioned elements(position: absolute;, position: relative; or position: fixed;) 

당 CSS를

.block { 
    position:relative; 
    width: 100px; 
} 

.block img { 
    position:absolute; 
    top:0; 
    left:0; 
} 

.block .title { 
    margin-top:100px; 
    text-align:center; 
    color: #FFF; 
    position: relative; 
    z-index: 1 
} 

FIDDLE