대부분의 CSS 속성은 사용하기 쉽습니다. 마크업 언어 요소에 CSS 속성을 사용하면 페이지를 새로 고치는 즉시 결과가 나타나는 경우가 많습니다. 다른 CSS 속성은 더 복잡하며 특정 상황에서만 작동합니다.
Z-index 속성은 위에서 언급한 후자 그룹에 속합니다. Z-지수는 의심할 여지 없이 다른 어떤 속성보다 혼란(호환성)과 좌절(개발자 심리)을 더 자주 유발합니다. 그러나 재미있는 점은 일단 Z-index를 실제로 이해하고 나면 이것이 매우 사용하기 쉬운 속성이며 많은 레이아웃 문제를 해결하는 데 강력한 도움을 제공할 것이라는 사실을 알게 될 것입니다.
이 글에서는 Z-index가 정확히 무엇인지, 왜 그렇게 잘 이해되지 않는지 설명하고, Z-index의 사용과 관련된 몇 가지 실제적인 문제에 대해 논의하겠습니다. 또한 기존 버전의 IE 및 Firefox에 존재하는 고유한 문제인 브라우저 간 차이점에 대해서도 설명합니다. Z-색인 속성에 대한 이러한 포괄적인 관점은 개발자에게 Z-색인 속성을 사용할 때 자신감과 강력한 도움을 줄 수 있는 좋은 기반을 제공합니다.
이건 뭐죠?
Z-index 속성은 HTML 요소의 스택 수준을 결정합니다. 요소의 스택 수준은 Z축(X축 또는 Y축과 반대)의 요소 위치를 기준으로 합니다. Z-인덱스 값이 높을수록 요소가 스택 순서에서 맨 위에 더 가까워진다는 의미입니다. 이 레이어링 순서는 수직 스레드 축을 따라 표시됩니다.
Z-색인이 어떻게 작동하는지 더 명확하게 보여주기 위해 위의 이미지는 쌓인 요소의 시각적 위치를 과장합니다.
자연스러운 레이어링 순서
HTML 페이지에서 자연스러운 스택 순서(즉, Z축의 요소 순서)는 여러 요소에 의해 결정됩니다. 다음은 스택 컨텍스트의 목록 항목을 표시하는 목록입니다(적절한 중국어 번역은 아직 발견되지 않았으며 스택 요소가 있는 스택 환경을 참조해야 함). 환경의. 이 목록의 항목 중 Z-색인 속성이 할당되지 않았습니다.
요소의 배경과 테두리는 쌓임 컨텍스트를 생성합니다.
인용하다:
·음수 값을 갖는 스태킹 컨텍스트 요소는 나타나는 순서대로 정렬됩니다(레벨이 낮을수록 높음).
위치 지정되거나 부동되지 않은 블록 수준 요소는 나타나는 순서대로 배열됩니다.
·위치가 지정되지 않은 부동 요소는 나타나는 순서대로 배열됩니다.
·인라인 요소는 나타나는 순서대로 배열됩니다.
·배치된 요소는 나타나는 순서대로 정렬됩니다.
Z-index 속성을 올바르게 사용하면 자연스러운 스택 순서가 변경됩니다.
물론, 요소들이 서로 겹쳐지도록 배치되지 않는 한, 요소들의 쌓인 순서는 특별히 명확하지 않습니다. 아래에는 자연스러운 스택 순서를 설명하기 위해 음수 여백이 있는 BOX가 표시되어 있습니다.
위의 BOX는 서로 다른 배경색과 테두리 색상으로 정의되었으며, 후자의 두 개는 엇갈리게 배치되어 음의 상단 여백을 정의하므로 자연스러운 쌓임 순서를 볼 수 있습니다. 마크의 1위는 회색 BOX, 2위는 파란색 BOX, 3위는 골드 BOX입니다. 적용된 음수 여백은 이러한 요소에 Z-색인 속성 집합이 없다는 사실을 명확하게 나타냅니다. 스택 순서는 자연적이거나 기본 복합 규칙입니다. 인터레이스 현상은 음수 마진으로 인해 발생합니다.