명세에 따르면 z-index는위치 지정 요소, 즉position属性不为relative요소에 적용됩니다. 그렇지 않으면 z-index 설정은 의미가 없습니다. 하나는 현재
스택에 설정하는 것입니다. 컨텍스트의 레벨(스태킹 컨텍스트); 두 번째는 새로운 스태킹 컨텍스트를 생성하는 것입니다.z-index는 값이 높을수록 사용자에게 더 가까워진다는 의미는 아닙니다. 스태킹 컨텍스트

1. 동일한 스태킹 컨텍스트의 요소, Z-색인이 높을수록 사용자에게 더 가까워집니다.

2. 다른 스택 컨텍스트의 요소. 하나의 스택 컨텍스트가 사용자에게 더 가까운 경우 모든 하위 요소는 다른 스택 컨텍스트의 하위 요소 앞에 있으며, 이는 다른 스택 컨텍스트의 하위 요소입니다. 가능해요

3. 그래서 z-index는 실제로 절대값이 아니라 상대값입니다.

예는 다음과 같습니다.

으아악 으아악

.p1p1p1과 .p2p1의 경우 후자가 z-index(800)가 전자(10)보다 높지만 전자가 있는 스택 컨텍스트(.p1p1)의 z-index(500)가 위치는 후자가 있는 스택보다 높으므로 컨텍스트(.p2p1)의 z-index(400)는 전자가 후자보다 위에 있습니다.

댓글에

를 설정했는데 9>0이므로 img가 맨 위에 표시됩니다.p{z-index:9;position:relative;}会建立一个新的堆叠上下文，和p同级的元素是0，img元素是9 -1

귀하의 질문에 따르면 실제로 위치 속성을 변경할 수 없습니다. 위치 속성을 상대 속성으로 변경하면 z-index 속성이 실제로 작동하지 않으므로 요구 사항을 충족할 방법이 없습니다. 다음과 같은 이유로:

으아악

A, B, H의 레벨은 888<999이므로 A와 H는 모두 B보다 낮습니다.

안 돼요. H와 B가 모두position: absolute이므로 z축에서 절대 위치 요소의 오프셋이 z 인덱스로 설정할 수 있는 양보다 훨씬 크다고 간주할 수 있습니다(절대 위치 요소는 무한한 z 오프셋을 가짐) 따라서 두 요소 H와 B의 z-index는 실제로 어떤 역할도 하지 않습니다.

삭제 후position: absolute코드는 다음과 같습니다

으아악

효과:

먼저 A, B, H는 모두 절대적 위치에 있고 그 다음에는 z-index, B>A, 당연히 B가 A를 차단하고 H는 A 내부에 있으며 절대적으로 A에 위치하므로 자연스럽게 H를 차단하여 해결됩니다. 방법은 z-index, A>B를 설정하는 것입니다. 이 레이아웃에서는 H의 z-index가 실제 의미가 없습니다(A가 포함되는 한 H도 포함됨). H가 A에 속하지 않는 한!

이 세상에서는 모든 요소z-index都声明了一个平面世界，平面世界的高度就是z-index的值。 而子元素的z-index가 비교된다고 상상할 수 있습니다.

전자의 외부 z-index가 후자보다 작은 경우 전자의 하위 노드가 후자를 초과하도록 할 수 있는 방법은 없습니다. 그러나 이 경우 전자는 모든 것을 차단할 수 있습니다. 후자이므로 포스터는 여전히 H에서 A로 변경되며 해당 레벨 설정을 A에서 꺼내면 효과를 얻을 수 있습니다

부모는 자식 요소의 위치를 제한할 수 없습니다