층상 중첩에 대한 5 가지 중첩 규칙

저자：Eve Cole 업데이트 시간：2025-02-06 10:36:27

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

많은 학생들이 왜이 div가 상위 레벨에 있고, div가 Z-index를 어떻게 설정하든, 당신은 미쳤고, 구토 및 설사, 메스꺼움과 불면증이 될 것입니다. , 당신은 층의 중첩을 사용하지 않습니다. 그러나 레이어의 중첩 효과는 인터랙티브 설계에서 자주 나타나므로 규칙을 마스터해야합니다.

먼저 기사에서 사용해야하는 몇 가지 개념을 명확히 해 보겠습니다 .

정적 포지셔닝 : 위치 : 정적 (위치 속성의 기본값).
동적 포지셔닝 : 위치 : 상대 또는 위치 : 절대 또는 위치 : 고정.
조상 요소 :이 요소를 포함하는 모든 요소.
부모 요소 : 요소를 직접 포함하는 조상 요소.
피어 요소 : 공통 상위 요소가있는 요소.

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

인용하다:

피어 요소는 매우 중요한 단어이며 여기에서 자세히 설명해야합니다.

이 예에서 Div#A 및 Div#B는 "동시 요소"가 아닙니다.

견적의 끝

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

규칙 1 : 피어 요소의 포지셔닝 방법이 동일하고 z-index 설정이 없으면 HTML은 후자에 의존합니다.

코드 박스를 실행하십시오

<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w.w.w.rt/xhtml1/dtd/xhtml1-transitional.dtd"> << <html xmlns ="http : //www.w3.org/1999/xhtml "> <head> <meta http-equiv ="content-type "content ="text/html = utf-8 "/> <meta name ="author " content = "Chomo" /> <link rel = "start"href = "http://www.14px.com"title = "home" /> <title> 규칙 1 : 피어 요소의 포지셔닝 메소드는 동일합니다. 인덱스를 설정할 때 z-가 없습니다. HTML은 후자에 의존합니다. </title> </head> <스타일 유형 = "text/css"> div {font :} div strong {#ffff :#036; {f00;} /*--- 블록의 모양 ---* / .div2 {70px; .granddiv1, 1px solid #060; #FCF} /*--- 블록 오프셋 위치 및 텍스트 위치를 정의합니다.* / .GrandDiv2 {-50px; -left :} .div2; 0;} </style> <body> <h3> 규칙 1 : 피어의 위치가 동일하고 z-index 설정이 없으면 HTML은 후자에 의존합니다. </h3> <div class = "div1">. div1 {position : static} </div> <div class = "div2">. div2 {position.static} </div> <div class = "div1"스타일 = "위치 : 상대;">. div1 {position.relative} </div> <div class = "div2"style = "position;">. div2 {position.absolute} </di v> </body > </html>
[Ctrl+A 모든 선택 팁 : 먼저 코드를 수정할 수 있습니다]

규칙 2 : 동일한 요소가 동적으로 위치하고 Z- 인덱스 설정이있는 경우 Z- 인덱스 값이 가장 큰 요소가 상단입니다.

코드 박스를 실행하십시오

<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w.w.w.rt/xhtml1/dtd/xhtml1-transitional.dtd"> << <html xmlns ="http : //www.w3.org/1999/xhtml "> <head> <meta http-equiv ="content-type "content ="text/html = utf-8 "/> <meta name ="author " content = "Chomo" /> <link rel = "start"href = "http://www.14px.com"title = "home" /> <title> 규칙 2 : 동일한 요소가 동적으로 위치되면 거기에 있습니다. z-index를 설정할 때 가장 큰 z-index 값을 가진 것이 가장 중요합니다. </title> </head> <스타일 유형 = "text/css"> div {font :} div strong {#ffff :#036; {f00;} /*--- 블록의 모양 ---* / .div2 {70px; .granddiv1, 1px solid #060; #FCF} /*--- 블록 오프셋 위치 및 텍스트 위치를 정의합니다.* / .GrandDiv2 {-50px; -left :} .div2; 0;} </style> <hod> <h3> 규칙 2 : 동일한 요소가 동적으로 위치하고 z-index 설정이있는 경우 z-index 값이 가장 큰 설정이 가장 높습니다. </h3> <div class = "div1"style = "위치 : 상대; z-index : 2;">. div1 {position.relative; z-index : 2} </div> <div class = "div2" style = "위치 : 상대; z-index : 1;">. div2 {position.relative; z-index : 1} </div> </body> </html>
[Ctrl+A 모든 선택 팁 : 먼저 코드를 수정할 수 있습니다]

규칙 3 : 피어 요소의 포지셔닝 방법은 다르며 동적 포지셔닝이 최우선 과제입니다.

규칙 4 : 단순한 요소가 아닌 경우 조상 요소에는 동적 레이아웃이 없을 때 HTML은 후자에 의존합니다.

코드 박스를 실행하십시오

<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w.w.w.rt/xhtml1/dtd/xhtml1-transitional.dtd"> << <html xmlns ="http : //www.w3.org/1999/xhtml "> <head> <meta http-equiv ="content-type "content ="text/html = utf-8 "/> <meta name ="author " content = "Chomo" /> <link rel = "start"href = "http://www.14px.com"title = "home" /> <title> 규칙 4 : 단순한 요소, 하나 및 조상 요소에 동적 레이아웃이 없으면 HTML은 후자에 의존합니다. </title> </head> <스타일 유형 = "text/css"> div {font :} div strong {#ffff :#036; {f00;} /*--- 블록의 모양 ---* / .div2 {70px; .granddiv1, 1px solid #060; #FCF} /*--- 블록 오프셋 위치 및 텍스트 위치를 정의합니다.* / .GrandDiv2 {-50px; -left :} .div2; 0;} </style> <body> <h3> 규칙 4 : 단순한 요소가 아닌 경우 조상 요소에는 동적 레이아웃이 없을 때 HTML은 후자에 의존합니다. </h3> <div class = "parentdiv1"> .parentDiv1 {position : staitc} <div class = "div1">. div1 {position : staitc} </div> </div> <div class = "pare ntdiv2" > <div class = "div2">. div2 {position : staitc} </div> .parentDiv2 {position : staitc} </div> <div class = "granddiv1"> .granddiv1 {position : st aitc} <div class = "parentdiv1"> .parentDiv1 {position : staitc} <div class = "div1">. div1 {position : staitc} </div> </div> </div> <div class = "granddiv2"> <div class = "parentdiv2"> <div class = "div2">. div2 {position : staitc} </div> .parentDiv2 {position : staitc;} </div> .granddiv2 {position : static;} </div> .granddiv2 {위치 : 정적;} </div> </body> </html>
[Ctrl+A 모든 선택 팁 : 먼저 코드를 수정할 수 있습니다]

규칙 5 : [중요] 비 단순한 요소가 동적 위치를 가질 때, 각각은 동적 포지셔닝 조상 요소를 위쪽으로 찾을 것이며, 각각은 비교를 위해 최고 수준의 조상 요소 (또는 자체)를 꺼낼 것입니다. .

사례 1 : 자식 요소의 z- 인덱스가 아무리 큰지 상관없이 부모 요소가 더 커집니다.

사례 2 : 부모 요소가 낮고 하위 요소도 높을 수 있습니다.

사례 1, 사례 2는 확장 비교와 결합됩니다.

코드 박스를 실행하십시오
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w.w.w.rt/xhtml1/dtd/xhtml1-transitional.dtd"> << <html xmlns ="http : //www.w3.org/1999/xhtml "> <head> <meta http-equiv ="content-type "content ="text/html = utf-8 "/> <meta name ="author " content = "Chomo" /> <link rel = "start"href = "http://www.14px.com"title = "home" /> <title> 규칙 5 : 비 단일 요소, 하나 또는 그 조상 요소가 동적 위치를 가질 때, 동적 위치 조상 요소를 위로 바라보고, 비교를 위해 최고 수준의 조상 요소 (또는 그 자체)를 꺼냅니다. </title> </head> <스타일 유형 = "text/css"> div {font :} div strong {#ffff :#036; {f00;} /*--- 블록의 모양 ---* / .div2 {70px; .granddiv1, 1px solid #060; #FCF} /*--- 블록 오프셋 위치 및 텍스트 위치를 정의합니다.* / .GrandDiv2 {-50px; -left :} .div2; 0;} </style> <h3> 법 5 <strong> (중요) </strong> : 비 유사 요소, 어떤 또는 조상 요소가 동적 위치를 가질 때, 그들은 또한 조상을 찾기 위해 위쪽을 찾을 것입니다. 조상 요소의 다음 단계까지 공통 요소에 동적으로 위치되는 요소는 비교를 위해 가장 높은 수준의 조상 요소 (또는 그 자체)를 가지고 있습니다. </h3> <p> 사례 1 : 자식 요소의 z-index가 아무리 큰지 상관없이 부모 요소가 더 커집니다. <p> <div class = "parentdiv1"style = "위치 : 상대; z-index : 2;"> .parentDiv1 {positive; <strong> z-index : 2 </strong>} <div cla ss = "div1">. div1 {position : static} </div> </div> <div class = "parentdiv2"style = "위치 : 상대; z-index : 1;"> <div class = "div2"style = "위치 : 상대; z-index : 10000;">. div2 {위치 : 상대; <strong> z-index : 10000 </strong>} </div> .parentDiv2 {위치 : <Stron g> z- 색인 : 1 </strong>} </div> <p> 시나리오 2 : 부모 요소가 낮고 하위 요소도 더 높을 수 있습니다. <p> <div class = "parentdiv1"> .parentDiv1 {position : staitc} <div class = "div1"style = "위치 : 상대;">. div1 {위치 : 상대} </d iv> </div> <div class = "parentdiv2"> <div class = "div2">. div2 {position : staitc} </div> .parentDiv2 {position : staitc} </div> <p> 시나리오 1, 케이스 2는 확장 비교와 결합됩니다. . <p> <div class = "granddiv1"style = "위치 : 상대; z-index : 3;"> .granddiv1 {positive; <strong> z-index : 3 </strong>} <div class = " ParentDiv1 "> .parentDiv1 {position : staitc} <div class ="div1 "style ="위치 : Z-index : 10000; strong>} </div> </div> </div> <div class = "granddiv2"> <div class = "parentdiv2"style = "위치 : 상대; z-index : 4;"> <div class = " div2 "> .div2 {위치 : static} </div> > < /body> < /html>
[Ctrl+A 모든 선택 팁 : 먼저 코드를 수정할 수 있습니다]

인용하다:

실제로, 처음 네 점은 모두 기본적이며 다섯 번째 요점 만 이해하기가 어렵습니다.

이 예에서는 div#a_inner5와 div#b_inner4의 캐스케이드 관계를 비교해 봅시다.
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#b_inner3을 비교하십시오.

상위 요소가 낮고 하위 요소가 높을 수있는 경우, 조상 요소에 동적 레이아웃이있을 때 비 피어 요소를 사용하는 것이 좋습니다. 비교는 위치와 관련이 없지만 조상 요소를 비교할 수 있습니다. HTML 위치를 통해.

견적의 끝

물론, 플래시와 같은 특별한 경우가 있으며, IE6을 차단할 수는 없습니다.