중첩의 다섯 가지 규칙

저자：Eve Cole 업데이트 시간：2009-06-12 17:53:18

[테스트에 참여한 브라우저: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2]
[운영체제 : Windows]

이 div는 왜 상위 레이어에 있고 저 div는 하위 레이어에 있는지 문제에 푹 빠져있는 학생들이 많은 것 같고, z-index를 어떻게 설정해도 안나오는 것 같습니다. 그들은 구토와 설사, 메스꺼움과 불면증으로 고통받고 결국에는 레이어 오버레이를 사용해도 됩니다. 그러나 레이어의 중첩 효과는 인터랙션 디자인에서 자주 나타나므로 이를 제어하려면 해당 법칙을 숙지해야 합니다.

먼저 이 기사에서 사용해야 하는 몇 가지 개념인

정적 위치 지정: 위치:정적(위치 속성의 기본값)을 명확히 합니다.
동적 위치 지정: 위치:상대 또는 위치:절대 또는 위치:고정.
상위 요소: 이 요소를 포함하는 모든 요소입니다.
상위 요소: 이 요소를 직접 포함하는 상위 요소입니다.
형제 요소: 공통의 상위 요소를 공유하는 요소입니다.

참고: 이러한 개념은 작성자가 사용자 정의했으며 이 기사에서만 사용됩니다.

인용문:

피어 요소는 매우 핵심적인 단어이므로 여기에서 자세히 설명해야 합니다.

이 예에서 div#a 및 div#b는 "형제 요소"가 아닙니다. 동일한 상위 div#f를 갖는 div#b 및 div#c와 같은 요소만 "형제 요소"라고 할 수 있습니다.

인용

끝 다음

다섯 가지 규칙을 살펴보겠습니다 .

규칙 1: 형제 요소가 같은 방식으로 배치되고 z-index 설정이 없으면 html이 후자 위에 배치됩니다.

규칙 2: 형제 요소가 동적으로 배치되고 z-index 설정이 있는 경우 z-index 값이 더 큰 요소가 먼저 옵니다.

규칙 3: 형제 요소가 다른 방식으로 배치되면 동적으로 상단에 배치합니다.

규칙 4: 형제가 아닌 요소 중 하나와 해당 상위 요소가 동적 레이아웃을 갖지 않는 경우 html이 우선 적용됩니다.

규칙 5 : [중요] 형제가 아닌 요소 중 하나 또는 그 조상 요소가 동적 위치 지정을 갖는 경우, 동시에 동적으로 위치된 조상 요소를 위쪽으로 검색하고 최상위 조상 요소(또는 그 자체)를 꺼내어 비교. .

사례 1: 자식 요소의 z-index가 아무리 크더라도 더 큰 부모 요소가 먼저 옵니다.

사례 2: 상위 요소는 하단에 배치되고, 하위 요소는 상단에 배치될 수도 있습니다.

사례 1과 사례 2는 확장 비교를 통해 결합됩니다.

코드 상자 실행
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>규칙 5: 형제가 아닌 요소, 어느 하나 또는 그 조상 요소에 동적 위치 지정이 있는 경우 동적으로 위치된 조상 요소를 위쪽으로 검색하고 비교를 위해 최상위 수준의 조상 요소(또는 자체)를 꺼냅니다. </title> </head> <style type="text/css"> div { 글꼴:12px/1.5 arial;} div 강함 { color:#fff 배경:#036;} h3 강함 { color:#f00;} /*--- 블록의 모양 정의---*/ .div1, .div2 { height:70px; border:1px solid #036; .grandDiv1, .grandDiv2 { 패딩:10px; 테두리:1px 솔리드 #060; 배경:#cf9; } .parentDiv1, .parentDiv2 { 패딩:10px; 너비:152px; #fcf; } /*--- 정사각형 오프셋 위치 및 텍스트 위치 정의---*/ .grandDiv2 { margin-top:-50px; margin-left:95px } .parentDiv2 { margin-top:-40px; -왼쪽: 85px; } .div2 { margin-top:-20px; padding-top:30px; 높이:40px; } .grandDiv2 .parentDiv2, .parentDiv2 .div2 0;} </style> <body> <h3>규칙 5<strong>(중요)</strong>: 형제가 아닌 요소 또는 해당 상위 요소 중 하나에 동적 위치 지정이 있는 경우 각 요소는 다음을 찾습니다. 동적으로 배치된 조상 요소를 동시에 찾아 조상 요소의 다음 수준으로 이동하고, 비교를 위해 가장 높은 수준의 조상 요소(또는 자체)를 꺼냅니다. </h3> <p>사례 1: 하위 요소의 z-index가 아무리 크더라도 더 큰 상위 요소가 먼저 옵니다. <p> <div class="parentDiv1" style="position:relative; z-index:2;"> .parentDiv1{position:relative;<strong>z-index:2</strong>} <div class=" div1">.div1{위치:정적}</div> </div> <div class="parentDiv2" style="위치:relative; z-index:1;"> <div class="div2" style=" 위치:상대적; z-색인:10000;">.div2{위치:상대적;<strong>z-색인:10000</strong>}</div> .parentDiv2{위치:상대적;<strong>z-색인: 1</strong>} </div> <p>사례 2: 상위 요소가 하단에 있고 하위 요소가 상단에 있을 수도 있습니다. <p> <div class="parentDiv1"> .parentDiv1{position:staitc} <div class="div1" style="position:relative;">.div1{position:relative}</div> </div> < div class="parentDiv2"> <div class="div2">.div2{position:staitc}</div> .parentDiv2{position:staitc} </div> <p>사례 1과 사례 2가 확장 비교와 결합되었습니다. <p> <div class="grandDiv1" style="position:relative; z-index:3;"> .grandDiv1{position:relative;<strong>z-index:3</strong>} <div class=" parentDiv1"> .parentDiv1{위치:staitc} <div class="div1" style="position:relative; z-index:10000;">.div1{position:relative;<strong>z-index:10000</strong >}</div> </div> </div> <div class="grandDiv2"> <div class="parentDiv2" style="position:relative; z-index:4;"> <div class="div2 ">.div2{position:staitc}</div> .parentDiv2{position:relative;<strong>z-index:4</strong>} </div> .grandDiv2{position:static;} </div> < /본문></html>
[Ctrl+A 모든 선택 팁: 코드의 일부를 먼저 수정할 수 있습니다.]

인용문:

사실 처음 4개 항목은 기본이며, 5번째 항목만 이해하기 더 어렵습니다

. "ab" 스타일="위치: 절대;">
<div id="a" 스타일="위치:상대적; z-index:100;">
<div id="a_inner1">
<div id="a_inner2">
<div id="a_inner3" style="위치:상대; z-index:98;">
<div id="a_inner4">
<div id="a_inner5">
</div>
</div>
</div>
</div>
</div>
</div>
<div 아이디="b">
<div id="b_inner1">
<div id="b_inner2">
<div id="b_inner3" style="위치:상대적; z-index:99;">
<div id="b_inner4">
</div>
</div>
</div>
</div>
</div>
</div>

이 예에서는 div#a_inner5와 div#b_inner4 간의 계단식 관계를 비교합니다.
공유하는 상위 요소 div#ab의 다음 레벨까지 div#a_inner5의 상위 요소에는 div#a, div#a_inner1, div#a_inner2, div#a_inner3, div#a_inner4의 상위 요소가 포함됩니다. 요소에는 div#b,div#b_inner1,div#b_inner2,div#b_inner3이 포함됩니다.
그런 다음 조상 요소 사이에 동적 위치 지정이 있는 요소를 분석합니다. div#a_inner5의 조상 요소 사이에 동적 위치 지정이 있는 요소는 다음과 같습니다. div#a, div#a_inner3; div#b_inner4의 조상 요소 사이에 동적 위치 지정이 있는 요소는 다음과 같습니다. div# b_inner3.
그런 다음 비교를 위해 가장 높은 레벨인 div#a > #div#b_inner3을 선택합니다.

상위 요소가 맨 아래에 있고 하위 요소도 맨 위에 있을 수 있는 경우 형제가 아닌 요소가 사용됩니다. 조상 요소에 동적 레이아웃이 있는 경우 해당 비교는 position:static과 관련이 없지만 해당 조상입니다. 요소는 html의 위치를 통해 비교할 수 있습니다.

견적 끝

물론 IE6의 플래시, 셀렉트 등 특수한 경우도 있는데, 이는 관련 기사를 직접 검색해 볼 수 있습니다.