불투명도 대 Z-Index: Z-Index가 반투명 요소와 항상 작동하지 않는 이유는 무엇입니까?

불투명도와 Z-Index: 보이지 않는 오버레이

웹 브라우저에서 요소를 계층화할 때 두 가지 주요 속성인 불투명도와 Z-색인. 불투명도는 요소의 투명도를 제어하는 ​​반면, z-인덱스는 스택 순서에서 요소의 위치를 ​​결정합니다. 그러나 이러한 속성 간의 놀라운 상호 작용이 발견되었습니다.

문제: 직각 충돌

"팝업 창"이 속성 위에 추가되는 시나리오를 생각해 보세요. 네이비 광장. 직관적으로 사각형이 팝업 아래에 완전히 숨겨져 있을 것으로 예상할 수 있습니다. 하지만 사각형의 불투명도를 1(예: 0.3) 미만으로 설정하면 사각형의 일부가 팝업 창 아래에 계속 표시됩니다.

Unraveling the Mystery

이 동작은 버그가 아니라 웹 브라우저의 의도적인 디자인 선택입니다. CSS 색상 모듈에 따라 불투명도가 1보다 작은 요소는 새로운 스택 컨텍스트를 생성합니다. 결과적으로 이 컨텍스트 외부의 요소는 Z-인덱스 값에 관계없이 그 안에 계층화될 수 없습니다.

자동 스태킹 컨텍스트

기본적으로 위치가 지정되지 않은 요소는 다음과 같습니다. 불투명도가 1보다 작은 경우 'z-index: 0' 및 'opacity: 1'이 있는 것처럼 처리됩니다. 즉, 실제 Z-인덱스 값에 관계없이 상위 스태킹 컨텍스트의 맨 아래에 있는 것처럼 항상 동일한 스태킹 순서로 렌더링됩니다.

충돌 해결

이 동작을 수정하려면 완전히 숨겨져야 하는 요소에 대해 1 미만의 불투명도 값을 사용하지 마세요. 또는 '위치: 절대' 또는 '위치: 고정'과 같은 CSS 속성을 사용하여 불투명도가 1 미만인 요소의 위치를 ​​지정하면 'z-index' 속성이 내에서 스택 순서를 제어하므로 원하는 스택 순서를 얻을 수 있습니다. 불투명도에 의해 생성된 새로운 스태킹 컨텍스트.

위 내용은 불투명도 대 Z-Index: Z-Index가 반투명 요소와 항상 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!