Windows와 Mac 간의 FF/크롬이 다른 CSS 절대 위치 지정

다음 테스트를 사용하고 있습니다. 내 Mac에서 firefox/chrome/safari에서 panel1은 panel2 위에 렌더링됩니다. 하지만 firefox/크롬에 내 Windows 컴퓨터에, 그것은 아래에 렌더링합니다.Windows와 Mac 간의 FF/크롬이 다른 CSS 절대 위치 지정

panel1을 panel2 바로 위에 배치하고 싶습니다. 무엇을 할 수있는 올바른 방법 것은 내가 이전 질문에서이 트릭을 보였다

<html> 

    <head> 
    </head> 

    <body> 

     <!-- Appears on top of panel2 in safari/chrome/ff on mac, but underneath on windows. --> 
     <div id='panel1' style='z-index:6; position:absolute; width:100px; height:100px; background-color:red'> 
     </div> 

     <div id='panel2' style='z-index:3; width:100px; height:100px; background-color:yellow'> 
     </div> 

    </body> 

</html>

? :. 사용자가 브라우저 프레임의 크기를 조정할 때 화면 주위로 움직이는 div가 더 큰 둥지에 있기 때문에 panel1의 위쪽/왼쪽 위치를 설정할 수 없습니다 (제 생각에).

감사

----------- 업데이트 ------------- 명시 적으로 모두 div의에 Z- 인덱스를 설정하려고

, 그

일했다.

출처

2010-08-01 user246114

FYI의 위치를 바꿉니다. 여기에 기본 Z- 색인의 몇 가지 예가 나와 있습니다. 제안 된대로 명시 적으로 설정하십시오. https://developer.mozilla.org/en/Understanding_CSS_z-index/Stacking_without_z-index –

IIRC'z-index'는 요소의 흐름이 다릅니다 (사양에서 무엇이 불려 왔는지 잊어 버림)). 하나의 div는 정적 인 위치를 갖고 다른 하나의 div는 절대 위치를 갖기 때문에 z- 인덱스는 관련이 없습니다. – strager

또한 게시물의 정확한 마크 업을 사용하면 모든 브라우저에서 빨간색으로 표시됩니다. http://jsbin.com/ehuho3 – strager

<div id='panel2' style='z-index:3; width:100px; height:100px; background-color:yellow'> 
    </div> 

    <div id='panel1' style='z-index:5; position:absolute; width:100px; height:100px; background-color:red'> 
    </div>

어쩌면? 2.

출처

2010-08-01 22:44:02 Mark

동일 - panel2가 여전히 panel1 위에 나타납니다! – user246114

panel1에 z-index 스타일을 설정해 보셨습니까?

출처

2010-08-01 22:43:13 Douglas

예, 똑같은 문제가 발생했습니다. 위의 코드가 업데이트됩니다. – user246114

Windows와 Mac 간의 FF/크롬이 다른 CSS 절대 위치 지정

답변

관련 문제