부모요소보다 자식요소의 z-index 값을 우선하는 방법 채택완료
하호헤하
1년 전
조회 17,790
아래 코드에서 자식요소인 .hd_div의 z-index가 부모요소인 #hd의 z-index보다 우선하고 싶은데 어떻게 해야할까요?
</p>
<p>function addOverlay() {</p>
<p> // 오버레이 요소 생성 및 추가</p>
<p> var overlay = $('<div id="overlay"></div>');</p>
<p> overlay.css({</p>
<p> 'position': 'fixed',</p>
<p> 'top': '0',</p>
<p> 'left': '0',</p>
<p> 'width': '100%',</p>
<p> 'height': '100%',</p>
<p> 'background-color': 'rgba(0, 0, 0, 0.5)',</p>
<p> 'z-index': '10001'</p>
<p> });</p>
<p> </p>
<p> // 헤더</p>
<p> $('#hd').css('z-index', '10000');</p>
<p> </p>
<p> // 왼쪽 메뉴</p>
<p> $('.hd_div').css('z-index', '10002');</p>
<p> </p>
<p> $('body').append(overlay);</p>
<p>}
오버레이가 실행되면서 #hd에서 .hd_div를 제외한 나머지는 오버레이 뒤에 쌓이게 하고 싶습니다.
.hd_div만 오버레이 위에 쌓이게 하고 싶습니다.
그런데 .hd_div가 #hd의 자식요소라 오버레이 뒤로 쌓이네요 ㅠㅠ
어떻게 해야 #hd에서 .hd_div 제외한 나머지는 오버레이 뒤로 보내고 .hd_div는 오버레이 앞에 쌓이게 할 수 있을까요?
아래 유튜브처럼 왼쪽 메뉴는 오버레이 앞에, 맨위 헤더는 오버레이 뒤로 보내고 싶어서요 ㅠㅠ
http://sir.kr/data/editor/2407/3067132580_1719817020.3278.png" width="100%" />
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인