CSS에서 Z- 인덱스 마스터 링

CSS의 이 기사는 CSS의

속성을 ​​탐색하며, 이는 캐스케이드 페이지 요소의 계단식 순서를 제어하는 ​​데 사용됩니다. 값이 높은 요소는 값이 낮은 요소에 표시됩니다. 이는 요소의 수평 및 수직 위치를 각각 제어하는 ​​페이지의 X 축 및 Y 축과 유사하며

Z 축에서 요소의 스태킹 순서를 제어합니다. z-index z-index

키 포인트 :

속성은 페이지 요소의 스태킹 순서를 제어할수록 요소가 더 많이 표시됩니다. 속성 값이 ,

또는

인 요소에서만 작동합니다.

• 를 설정하여 , z-index, position, , absolute 또는 relative에 값을 할당하지 않고 설정하면 원래 위치를 변경하지 않고 요소의 스태킹 순서를 제어 할 수 있습니다. 페이지. fixed
값의 구문 분석은 부모 스태킹 컨텍스트 내에서 수행됩니다. 즉, 요소의 조직과 유연성을 향상 시키려면 position: relative 값을 설정하기 위해 100의 증분을 사용하는 것이 좋습니다. 이 접근법은 두 개의 기존 레이어 사이에 새 레이어를 추가 할 때 사용 가능한 수치 선택을 제공합니다. top right 기본 스태킹 순서 html을 작성할 때 문서의 후면 요소가 기본적으로 전면 요소 위에 쌓입니다. bottom left 이 HTML 스 니펫에서 모든 요소가 겹치도록 설정되면 바닥 글이 신체 함량 위에 쌓여있어 헤더 위에 쌓입니다. 는 ,
• , , z-index, z-index, > 속성을 ​​결합하여 겹칠 수 있습니다. z-index
각 요소의 속성이
• 로 설정되면 모두 겹치게됩니다. 바닥 글은 문서에 마지막으로 나타나기 때문에 기본적으로 처음 두 요소 위에 쌓입니다. z-index
오프셋 속성을 사용하여

및

> 요소의 스태킹 순서를보다 명확하게 확인하십시오.

스택 컨텍스트 중첩 요소는 를 사용하여 생성 할 수 있지만, 소위

스태킹 컨텍스트 를 만들지는 않습니다.

스태킹 컨텍스트는 다음과 같은 방식으로 생성 될 수 있습니다.

<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>

요소는 속성을 ​​가지며 Flexbox 항목에는

가 아닌 값이 있습니다. position 요소 ()의 불투명도는 1보다 작습니다. top 요소의 right 속성은 비 bottom left 스태킹 컨텍스트를 생성하고 사용하는 일반적인 방법은 첫 번째입니다.

이전 예제로 돌아가서, 우리는 서로 겹치는 세 가지 요소가 있지만 현재는

값이 없습니다. z-index

속성을 ​​사용하면 스태킹 순서를 제어 할 수 있습니다.

바닥 글을 1로, 본체 2로, 헤더 z-index를 3으로 설정하면 기본 스태킹 순서를 완전히 되돌릴 수 있습니다.

표면에서는 간단 해 보입니다. 값이 높을수록 요소 스택이 높아집니다. 그래서

는 항상 z-index 이상입니다. 불행히도, 현실은 이것보다 더 복잡합니다. z-index 스태킹 컨텍스트에서 z-index

컨테이너 내부에 상자를 추가하여 오른쪽 하단 모서리 외부에 배치하면 핑크 박스 아래에 녹색 상자 위에 놓여 있습니다.

z-index z-index: 9999에 대한 우리가 알고있는 것에 기초하여, 우리는이 노란색 상자를 핑크 박스 위에 표시하기 위해 에 대해 더 높은 값을 설정하면됩니다. z-index: 9 우리가

4로 설정하면 (위 )는 아무런 변경 사항이 없습니다. 사람들은 보통 매우 많은 숫자 (9999와 같이)로 쌓는 것을 강요하려고하지만 이것은 효과가 없습니다. 코드 기반에서 볼 수있는

값은 코드 냄새이므로 가능한 경우 피하십시오.

핑크 박스 위에 놓인 노란색 상자가 예상되는 결과를 얻을 수없는 이유는

<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>

가 스태킹 컨텍스트에서 동작하는 방식 때문입니다.

이를 보여주기 위해 MDN 웹 사이트에서 빌린 약간 더 복잡한 예를 살펴 보겠습니다. site-content ... (MDN 예제의 HTML 및 CSS 코드는 기사가 너무 길지만 주요 설명 부분이 유지되므로 여기서 생략됩니다) ....

이 모든 것은 부모 스태킹 컨텍스트 내에서 모든 값이 구문 분석된다는 사실에 의해 설명 될 수 있습니다. 상위 컨테이너 의 값은 바닥 글보다 높기 때문에

.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}

내의 모든 포지셔닝 요소는 해당 컨텍스트에서 평가됩니다.

스태킹 컨텍스트 내에서 요소의 스태킹 순서를 이해하면 중첩 된 주문 목록의 어린이와 비교할 수 있습니다. z-index 이것은 다음과 같이 쓸 수 있습니다 : z-index 헤더 :

주제 : 박스 1 :

Box 2 : z-index z-index: 3 Box 3 : z-index

바닥 글 : z-index

따라서 헤더의 가 5이고 상자 1의 가 6이더라도 렌더링 순서는 4.6이며 여전히 5 미만입니다. 따라서 박스 1은 헤더 아래에 표시됩니다.

처음에는 약간 혼란 스러웠지만 연습과 함께 실제로 말이되기 시작했습니다!

z-index는 위치 요소 에만 적합합니다 요소의 스태킹 순서를 제어하려면

를 사용할 수 있습니다. 그러나 는 요소의 , z-index 또는 인 경우에만 적용됩니다. position absolute로 요소를 정확하게 넣는 것은 복잡한 레이아웃이나 흥미로운 UI 패턴을 구축하는 데 적합하지만 페이지의 원래 위치에서 요소를 움직이지 않고 스태킹 순서를 제어하는 ​​것이 종종 바람직합니다. relative 이 경우 만 설정할 수는 있지만 , , fixed 또는 z-index에 대한 값을 제공하지 마십시오. 요소는 페이지의 원래 위치에 유지되며 문서 흐름이 중단되지 않으며 음의 z- 인덱스 값을 사용할 수 있습니다 수화 된 요소는 종종 복잡한 모양 또는 UI 구성 요소를 구축하는 데 사용됩니다. 이것은 일반적으로 요소가 서로 겹쳐지고

값이 계속 증가 함을 의미합니다. 다른 요소 아래에 요소를 배치하려면 position 값이 낮아야하며 음수 일 수 있습니다.

이것은 의사 요소를 사용할 때 유용하며 부모 요소 내용 뒤에 배치하려고합니다.

스테이킹 컨텍스트가 작동하는 방식으로 인해 또는 position: relative 요소가 부모 요소의 텍스트 내용 후에 배치되면 값을 설정해야합니다. top z- 인덱스 전략 내 프로젝트에서 right를 적용 할 때 사용한 간단한 전략을 요약하겠습니다. bottom 우리는 값의 단일 자릿수 증분을 사용했지만 left와 로 설정된 두 요소 사이에 새 요소를 추가하려면 어떻게해야합니까? 코드 기반 전체에 걸쳐 많은 값을 변경해야하므로 문제를 일으킬 수 있으며 웹 사이트의 다른 부분에서 CSS가 중단 될 수 있습니다. z-index 100 단계 로 z-index를 설정하십시오 를 다룰 때, 당신은 종종 다음과 같은 코드를 볼 수 있습니다 :

.

내 의견으로는 나쁘게 보입니다. 그러한 값을 보면 일반적으로 개발자가 스태킹 컨텍스트를 이해하지 못하고 하나의 층이 다른 층 위에 있도록 강제하려고합니다.

9999, 53 또는 12와 같은 숫자를 사용하는 대신 비율을 체계화하고 프로세스에 더 많은 순서를 가져올 수 있습니다. 개발자 강박 장애가 있기 때문이 아닙니다. 진지하게.

나는 z-index의 단일 자리 증분을 사용하지 않았지만 100 단위를 사용했습니다. z-index 나는 이것을 정리하기 위해 이것을했으며 프로젝트에 사용 된 많은 다른 계층을 발견했습니다. 또 다른 이점은 두 레이어 사이에 새 레이어를 추가 해야하는 경우 99 개의 잠재적 값 중에서 선택할 수 있다는 것입니다. 이 수동 접근 방식은 시스템을 구축 할 때 매우 신뢰할 수 있지만 Sass와 같은 전처리 자와 함께 사용하면보다 유연하게 만들 수 있습니다.

... (FAQ 부품은 이전 출력에 더 반복적이기 때문에 여기서 생략) ...

위 내용은 CSS에서 Z- 인덱스 마스터 링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!