부모요소보다 자식요소의 z-index 값을 우선하는 방법
본문
아래 코드에서 자식요소인 .hd_div의 z-index가 부모요소인 #hd의 z-index보다 우선하고 싶은데 어떻게 해야할까요?
function addOverlay() {
// 오버레이 요소 생성 및 추가
var overlay = $('<div id="overlay"></div>');
overlay.css({
'position': 'fixed',
'top': '0',
'left': '0',
'width': '100%',
'height': '100%',
'background-color': 'rgba(0, 0, 0, 0.5)',
'z-index': '10001'
});
// 헤더
$('#hd').css('z-index', '10000');
// 왼쪽 메뉴
$('.hd_div').css('z-index', '10002');
$('body').append(overlay);
}
오버레이가 실행되면서 #hd에서 .hd_div를 제외한 나머지는 오버레이 뒤에 쌓이게 하고 싶습니다.
.hd_div만 오버레이 위에 쌓이게 하고 싶습니다.
그런데 .hd_div가 #hd의 자식요소라 오버레이 뒤로 쌓이네요 ㅠㅠ
어떻게 해야 #hd에서 .hd_div 제외한 나머지는 오버레이 뒤로 보내고 .hd_div는 오버레이 앞에 쌓이게 할 수 있을까요?
아래 유튜브처럼 왼쪽 메뉴는 오버레이 앞에, 맨위 헤더는 오버레이 뒤로 보내고 싶어서요 ㅠㅠ
답변 1
자식이 부모를 넘을 수 없어요 ..
따라서, 요소를 밖으로 빼는 방법을 쓰셔야 할 것 같습니다.
참고로 예제로 올려주신 유튜브 역시 자식이 아닌 형제로 구현되어있습니다.
넵 답변 감사합니다. 따로 빼서 해야겠네요 ㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.