z-index가 내가 기대하는대로 작동하지 않습니다

StackOverflow https://stackoverflow.com/questions/389788

  •  23-08-2019
  •  | 
  •  

문제

그래서 나는 이것을 대략적으로 얻었습니다.

<div id="A">
    <ul>
        <li id="B">foo</li>
    </ul>
</div>
<div id="C">
    ...
</div>

이것들은 b와 c가 겹치도록 배치됩니다.

A가 있습니다 z-index 의 90, B는 a에 있습니다 z-index 의 92, 그리고 C는 a z-index 의 91. 그러나 C는 B 앞에 나타납니다. 내가 뭘 잘못하고 있습니까? (더 자세한 내용이 필요한지 알려주세요.)

도움이 되었습니까?

해결책

사용 z-index 동일한 컨테이너의 요소와 관련이 있습니다. B는 A 내부에 포함되므로 B의 Z- 안덱은 A 내부의 다른 요소를 해결할 때만 적용됩니다. C와 관련하여 B와 A는 모두 Z-index 90에서 렌더링됩니다. 앞에 렌더링됩니다.

다른 팁

요소에 위치가없는 경우 : 상대 / 위치 : 절대 / 위치 : 고정 스타일, 위치 : 정적 모든 요소의 기본 위치 스타일입니다.

위치 인 요소의 경우 : 정적 인 z-index는 단순히 작동하지 않습니다. 브라우저는 XML 요소의 순서대로 스택을 렌더링하고 z-index 속성을 무시합니다.

이와 같은 상황이 작동하려면 위치를 추가해야합니다. 위치를 추가해야합니다. 3 가지 요소 A, B, C에 비해 C.

Z-Index 및 CSS 스태킹에 대한 자세한 내용은 여기로 이동하십시오. http://www.tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top