[테스트에 참여한 브라우저: IE6/IE7/IE8/FF3/OP9.6/SF3/Chrome2]
[운영 체제: Windows]
많은 학생들이 왜 이 div는 상위 레이어에 있고 저 div는 하위 레이어에 있는지에 대한 문제에 푹 빠져 있는 것 같습니다. z-index를 어떻게 설정해도 상위에 올라가지 못하고 구토를 하게 됩니다. 설사, 메스꺼움, 불면증 등을 겪고 우울증에 걸리기 때문에 감히 레이어 오버레이를 사용하지 않습니다. 그러나 레이어의 중첩 효과는 인터랙션 디자인에서 자주 나타나므로 이를 제어하려면 해당 법칙을 숙지해야 합니다.
먼저, 기사에서 사용해야 할 몇 가지 개념을 명확히 합니다.
1. 정적 위치 지정: position:static(위치 속성의 기본값).
2. 동적 위치 지정: 위치:상대 또는 위치:절대 또는 위치:고정.
3. 상위 요소: 이 요소를 포함하는 모든 요소입니다.
4. 상위 요소: 해당 요소를 직접 포함하는 상위 요소입니다.
5. 형제 요소: 공통의 상위 요소를 갖는 요소입니다.
[참고] 이러한 개념은 저자가 맞춤화한 것이며 이 기사에서만 사용됩니다.
피어 요소는 매우 중요한 단어이므로 여기에서 자세히 설명해야 합니다.
| 인용된 내용은 다음과 같습니다. |
이 예에서 div#a 및 div#b는 "형제 요소"가 아닙니다. 동일한 상위 div#f를 갖는 div#b 및 div#c와 같은 요소만 "형제 요소"라고 할 수 있습니다.