상위 요소의 `z-index`를 수정하지 않고 CSS에서 하위 요소가 상위 요소 위에 표시되도록 하려면 어떻게 해야 합니까?

Z-색인 충돌 해결: 상위 상위 하위

HTML 및 CSS로 작업할 때 요소 위치를 제어하는 ​​것이 어려울 수 있습니다. , 특히 스태킹 순서와 관련하여. 이 질문은 하위 요소가 상위 요소보다 Z-색인에서 더 높게 표시되도록 하는 문제를 다룹니다.

제공된 코드 스니펫은 상위 div, 하위 div 및 전체 페이지 div의 세 가지 요소를 정의합니다. 그러나 상위 div에 적용된 Z-색인으로 인해 하위 div가 그 뒤에 나타납니다. 사용자는 상위 div의 위치를 ​​수정하거나 요소를 제거하지 않고 이를 되돌릴 수 있는 솔루션을 찾고 있습니다.

답변:

안타깝게도 하위 요소의 z-index가 상위의 z-index보다 높습니다. 이는 하위 항목의 스태킹 인덱스가 자동으로 상위 항목과 동일한 수준으로 설정되기 때문입니다.

사용자가 이미 구현한 실행 가능한 유일한 솔루션은 상위 div에서 z-index를 제거하는 것입니다. 이렇게 하면 하위 div가 전체 페이지 div와 동일한 스택 인덱스에 배치되어 하위 div가 하위 div 앞에 표시될 수 있습니다.

또는 하위 div를 중첩하는 대신 상위 div의 형제로 만드는 방법도 있습니다. 그 안에. 이렇게 하면 하위 div에 자체적인 독립적 스택 인덱스가 제공되므로 원하는 경우 전체 페이지 div보다 높은 위치에 배치할 수 있습니다.

위 내용은 상위 요소의 `z-index`를 수정하지 않고 CSS에서 하위 요소가 상위 요소 위에 표시되도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!