CSS z-index 페이지의 요소 순서별로 재정의 되었습니까?

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

  •  13-09-2019
  •  | 
  •  

문제

나는 몇 시간 동안 IE7 FOE의 CSS Z-Index와 싸우고 있습니다. 어쩌면 당신은 도울 수 있습니다!

나는 절대적으로 배치 된 div를 가지고 있으며, 부모 div 위에 나타납니다. 그러나 - 그것은 나중에 부모에게 형제 자매 인 이후의 divs 아래에 나타납니다.

Z-Index가 각 DIV 또는 무언가의 국소 범위에만 적용되는 것처럼 매우 기괴한 행동처럼 보입니다.

페이지의 다른 요소보다 더 큰 z-index를 설정할 때 요소를 설정할 때 상단에 상관없이 무엇을 설정할 수 있습니까?

내 테스트 페이지는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
</head>
<body>
<div style="position: relative; z-index: 0">
    div1
    <div style="position: relative; z-index: 0">
        div2
    </div>
    <div style="color: red; background-color: #ffffff; position: absolute; z-index: 2">
        div3
    </div>
</div>
<div style="position: relative; z-index: 0">
    div1
    <div style="position: relative; z-index: 0">
        div2
    </div>
    <div style="color: red; background-color: #ffffff; position: absolute; z-index: 2">
        div3
    </div>
</div>
<div style="position: relative; z-index: 0">
    div1
    <div style="position: relative; z-index: 0">
        div2
    </div>
    <div style="color: red; background-color: #ffffff; position: absolute; z-index: 2">
        div3
    </div>
</div>
</body>
</html>
도움이 되었습니까?

해결책

즉, a 주요 Z- 안수 버그:

Internet Explorer에서 위치한 요소는 0의 z-index 값으로 시작하여 새로운 스택 컨텍스트를 생성합니다. 따라서 z-index는 올바르게 작동하지 않습니다.

Z-Indexes를 변경하려고 시도 할 수 있지만 두 요소가 모두 나타나기를 원한다면 조상 구조에서 벗어나 최상위 DOM 요소를 만들어야 할 수도 있습니다.

다른 팁

위치가있는 요소 : Absolute는 컨테이너 내부의 절대 위치를 취합니다. 특히이 컨테이너가 위치로 설정된 경우 : 상대.

모든 위치 : 뷰포트에 따라 배치 해야하는 절대 요소는 "신체"요소 바로 아래에 DOM에 나와야합니다. 일반적으로 닫는 바디 태그 직전에 HTML 코드에 마지막으로 넣는 것이 좋은 관행으로 간주됩니다.

그냥 제거하십시오 position: relative

이미지에 style = 'z-index : #'를 가질 수 있습니까?

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