부모요소보다 자식요소의 z-index 값을 우선하는 방법

부모요소보다 자식요소의 z-index 값을 우선하는 방법

QA

부모요소보다 자식요소의 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는 오버레이 앞에 쌓이게 할 수 있을까요?

 

아래 유튜브처럼 왼쪽 메뉴는 오버레이 앞에, 맨위 헤더는 오버레이 뒤로 보내고 싶어서요 ㅠㅠ

 

3067132580_1719817020.3278.png

이 질문에 댓글 쓰기 :

답변 1

자식이 부모를 넘을 수 없어요 ..

 

따라서, 요소를 밖으로 빼는 방법을 쓰셔야 할 것 같습니다.

 

참고로 예제로 올려주신 유튜브 역시 자식이 아닌 형제로 구현되어있습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 1

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT