[테스트에 참여한 브라우저: 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이 후자 위에 배치됩니다.
코드 상자 실행
[Ctrl+A 모든 팁 선택: 먼저 일부 코드를 수정할 수 있습니다.]
규칙 2: 형제 요소가 동적으로 배치되고 z-index 설정이 있는 경우 z-index 값이 더 큰 요소가 먼저 옵니다.
코드 상자 실행
[Ctrl+A 모든 선택 팁: 코드의 일부를 먼저 수정할 수 있습니다.]
규칙 3: 형제 요소가 다른 방식으로 배치되면 동적으로 상단에 배치합니다.
코드 상자 실행
[Ctrl+A 모든 선택 팁: 코드의 일부를 먼저 수정할 수 있습니다.]
규칙 4: 형제가 아닌 요소 중 하나와 해당 상위 요소가 동적 레이아웃을 갖지 않는 경우 html이 우선 적용됩니다.
코드 상자 실행
[Ctrl+A 모든 팁 선택: 먼저 일부 코드를 수정할 수 있습니다.]
규칙 5 : [중요] 형제가 아닌 요소 중 하나 또는 그 조상 요소가 동적 위치 지정을 갖는 경우, 동시에 동적으로 위치된 조상 요소를 위쪽으로 검색하고 최상위 조상 요소(또는 그 자체)를 꺼내어 비교. .
사례 1: 자식 요소의 z-index가 아무리 크더라도 더 큰 부모 요소가 먼저 옵니다.
사례 2: 상위 요소는 하단에 배치되고, 하위 요소는 상단에 배치될 수도 있습니다.
사례 1과 사례 2는 확장 비교를 통해 결합됩니다.
코드 상자 실행
사례 1과 사례 2가 확장 비교와 결합되었습니다.
인용문:
사실 처음 4개 항목은 기본이며, 5번째 항목만 이해하기 더 어렵습니다
이 예에서는 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의 플래시, 셀렉트 등 특수한 경우도 있는데, 이는 관련 기사를 직접 검색해 볼 수 있습니다.