Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
검색 결과

    쌓임 맥락 예제3

    « CSS « CSS z-index 이해하기

    쌓임 맥락 예제3

    마지막 예제는 멀티 레벨 HTML 계층 구조에서 z-index 속성 값을 지정할때 생기는 문제에 대해 다룰 것이다. 

    몇개의 position 속성 값이 지정된 3-레벨 계층 메뉴를 생각하자. 두번째 레벨과 세번째 레벨의 메뉴는 그들의 부모에 마우스를 갖다 대거나 클릭했을 때 보인다. 이 메뉴를 클래스 선택자를 통해 스타일링 해보자. 

    만약 세 메뉴가 부분적으로 겹친다면 쌓임을 해결하는 것이 문제가 된다. 

    Stacking context example 3

    첫번째 레벨 메뉴는 position 속성 값만이 relative로 지정되어있다. 따라서 이는 쌓임 맥락을 형성하지 않는다. (역자: z-index 속성 값을 지정하지 않았다.) 

    두번째 레벨 메뉴는 position 속성 값이 absolute로 지정되었다. 두번째 레벨 메뉴를 모든 첫번째 레벨 메뉴보다 위에 두기 위해서 z-index 속성 값이 사용되었다. 따라서 모든 두번째 레벨 메뉴에 쌓임 맥락이 생성되고 세번째 레벨 메뉴는 부모의 쌓임 맥락에 속하게 된다. 

    따라서 세번째 레벨 메뉴는 그 부모의 다음 두번째 레벨 메뉴 아래에 놓이게 된다. 왜냐하면 모든 두번째 레벨 메뉴는 같은 z-index 속성 값을 가지고 기본 쌓임 규칙을 적용받기 때문이다. (역자: 같은 z-index 속성 값을 가지는 형제 엘리먼트들은 HTML 문서상에서 나중에 등장한 것이 위에 쌓인다.)

    이 상황을 더 잘 이해하기 위해 쌓임 맥락 계층 구조를 그려보자.

    • 뿌리 엘리먼트 쌓임 맥락
      • LEVEL #1
        • LEVEL #2 (z-index: 1)
          • LEVEL #3
          • ...
          • LEVEL #3
        • LEVEL #2 (z-index: 1)
        • ...
        • LEVEL #2 (z-index: 1)
      • LEVEL #1
      • ...
      • LEVEL #1

    이 문제를 해결하는 방법에는 1) 서로 다른 메뉴를 겹치지 않게 배치하기, 2) 클래스 선택자 뿐만 아니라 id 선택자를 이용하여 각각의 엘리먼트에 z-index 속성 값을 지정하기, 3) HTML 구조를 단순화하여 멀티 레벨 메뉴를 사용하지 않기 등이 있다. 

    노트: 소스 코드에는 두번째 레벨 메뉴와 세번째 레벨 메뉴들이 position 속성이 absolute로 지정된 컨테이너에 싸여있는 것을 볼 수 있다. 이는 여러개의 엘리먼트들의 위치를 한꺼번에 지정하는데 유용하다. 

    예제 소스 코드

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head><style type="text/css">
    
    div { font: 12px Arial; }
    
    span.bold { font-weight: bold; }
    
    div.lev1 {
       width: 250px;
       height: 70px;
       position: relative;
       border: 2px outset #669966;
       background-color: #ccffcc;
       padding-left: 5px;
    }
    
    #container1 {
       z-index: 1;
       position: absolute;
       top: 30px;
       left: 75px;
    }
    
    div.lev2 {
       opacity: 0.9;
       width: 200px;
       height: 60px;
       position: relative;
       border: 2px outset #990000;
       background-color: #ffdddd;
       padding-left: 5px;
    }
    
    #container2 {
       z-index: 1;
       position: absolute;
       top: 20px;
       left: 110px;
    }
    
    div.lev3 {
       z-index: 10;
       width: 100px;
       position: relative;
       border: 2px outset #000099;
       background-color: #ddddff;
       padding-left: 5px;
    }
    
    </style></head>
    
    <body>
    
    <br />
    
    <div class="lev1">
    <span class="bold">LEVEL #1</span>
    
       <div id="container1">
    
          <div class="lev2">
          <br /><span class="bold">LEVEL #2</span>
          <br />z-index: 1;
    
             <div id="container2">
          
                <div class="lev3"><span class="bold">LEVEL #3</span></div>
                <div class="lev3"><span class="bold">LEVEL #3</span></div>
                <div class="lev3"><span class="bold">LEVEL #3</span></div>
                <div class="lev3"><span class="bold">LEVEL #3</span></div>
                <div class="lev3"><span class="bold">LEVEL #3</span></div>
                <div class="lev3"><span class="bold">LEVEL #3</span></div>
                <div class="lev3"><span class="bold">LEVEL #3</span></div>
                <div class="lev3"><span class="bold">LEVEL #3</span></div>
                <div class="lev3"><span class="bold">LEVEL #3</span></div>
                <div class="lev3"><span class="bold">LEVEL #3</span></div>
                <div class="lev3"><span class="bold">LEVEL #3</span></div>
          
             </div>
    
          </div>
          
          <div class="lev2">
          <br /><span class="bold">LEVEL #2</span>
          <br />z-index: 1;
          </div>
          
       </div>
    </div>
    
    <div class="lev1">
    <span class="bold">LEVEL #1</span>
    </div>
    
    <div class="lev1">
    <span class="bold">LEVEL #1</span>
    </div>
    
    <div class="lev1">
    <span class="bold">LEVEL #1</span>
    </div>
    
    </body></html>
    

    See also

     

    Original Document Information

    문서 태그 및 공헌자

    Contributors to this page: jaemin_jo, teoli
    최종 변경: teoli,