장소 이미지 뒤에 CSS

Question

를 사용하여 div를 내가 가지고있는 다음과 같은 마크 업 (바이올린 예 여기 : http://jsfiddle.net/9gvj11o5/8/)

<div class="header">   
    <div class="image"> 
    <img src="http://placehold.it/2200x800" alt=""/> 
    </div>  
    <div class="menu">This is the menu</div>  
    <div class="tools">These are the tools</div>   
</div>  
<div class="content">content</div>  

그리고 다음 CSS :

.header { 
    position: relative; 
} 

.image { 
    position: absolute; 
} 

img { 
    width: 100%; 
    height: auto; 
    outline: 0; 
} 

내가 반응하고 100을 가지고 이미지를 필요 너비가 위쪽으로 정렬되었습니다.

하지만 이미지와 정상적인 흐름을 유지하려면 메뉴와 도구가 필요합니다.

내용은 이미지 뒤에 있으므로 머리글 뒤에 있어야합니다.

이미지는 머리글 div의 "배경"이됩니다. (배경 이미지를 사용할 수 없음)

위치를 사용하고 있지만 사용하는 순간 메뉴와 도구가 사라집니다.

무엇이 누락 되었습니까? 어딘가에 다른 래퍼 div가 필요합니까?

Answer 1

나는 .menu & .tools 그래서 랩퍼 div 대신 각각의 아이에게 z-index을 적용하기 만하면 2 명 div의 포장 것입니다.앞에 .menu & .tools (줄 바꿈)을 만듭니다.

이 에서 position:relative에서 .image으로 변경하려면 .content 아래에 header이 있어야합니다.

아래에서 매우 간단한 스 니펫을 볼 수 있습니다.

.header { 
 
    position: relative; 
 
} 
 
.image { 
 
    position: relative; 
 
    z-index:1 
 
} 
 
#menu-all { 
 
    position:absolute; 
 
    top:0; 
 
    z-index:2 
 
} 
 
img { 
 
    width: 100%; 
 
    height: auto; 
 
    outline: 0; 
 
}

<div class="header"> 
 
    <div class="image"> 
 
     <img src="http://placehold.it/2200x800" alt="" /> 
 
    </div> 
 
    <div id="menu-all"> 
 
     <div class="menu">This is the menu</div> 
 
     <div class="tools">These are the tools</div> 
 
    </div> 
 
</div> 
 
<div class="content">content</div>

Answer 2

z-index을 사용하여 요소의 레이어 순서를 정의 할 수 있습니다. 숫자가 작을수록 스택의 "하단"에 가깝습니다. 그래서 우리는 img에 아주 작은 숫자를주고 메뉴와 도구에는 매우 큰 숫자를줍니다.

.header { 
    position: relative; 
} 

.image { 
    position: absolute; 
    z-index: 1; /* here you can use -1 as Paulie_D points out in the comments */ 
} 

img { 
    width: 100%; 
    height: auto; 
    outline: 0; 
    z-index: 2; /* here you can use -1 as Paulie_D points out in the comments */ 
} 

.menu { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 888; /* You can remove this declaration entirely if you set -1 above */ 
} 

.tools { 
    position: absolute; 
    top: 0; 
    right: 0; 
    z-index: 888; /* You can remove this declaration entirely if you set -1 above */ 
}