z-index가 다른 방법이 없다면 요소를 다른 방법 위에 배치하는 유일한 방법입니까?

Question

나는지도가있는 응용 프로그램을 작업하고 있으며 코너에 일부 물건이있는 div가 있습니다. 이지도를 클릭하여 작은 창에 정보를 가져올 수 있습니다. 창은 어떤 경우에는 코너에서 DIV로 덮여있는 것입니다.

나는 반대 효과를 원한다 (창은 divs 커버). 나는 이것이 단순히 Z- 인덱스 문제 일 것이라고 생각했지만 그것을 작동시킬 수는 없습니다. 이것은 IE7과 관련이 있으며 조금 읽는 것부터 Z-INDEX가 배치 된 요소 안에 있지 않으면 작동하지 않는 것처럼 보입니다.

요소는 Z-Index가 제대로 작동하도록하기 위해 올바르게 배치 된 것처럼 보이지만 운이 거의 없습니다. 나는 Firebug를 통해 스타일링을 추가하면서 놀았지만 변화를 얻는 데는 운이 없었습니다. 실제로 창은 단지 두 개의 divs 일뿐입니다.

z-index가 여기서 문제가 될 수있는 유일한 것입니까 아니면 내가 모르는 다른 것이 있습니까?

내가 원하는 효과를 달성하기위한 다른 방법이 있습니까? jQuery를 통해 DIV를 숨길 수는 없습니다. 일부는지도에서 열리는 창 뒤에서 볼 수 있어야하기 때문입니다.

Answer 1

스태킹 컨텍스트 버그를 치고 있습니다

http://therealcrisp.xs4all.nl/meuk/ie-zindexbug.html

IE의 모든 위치 DIV는 새로운 스태킹 컨텍스트를 생성하고 Z-INDEX가 다른 스태킹 컨텍스트를 방지하여 다른 스태킹 컨텍스트를 방지합니다.

해결책은 당신이 원하는 창을 나무 위로 위에 (예를 들어, 몸에), Z-index 값 강판을 창문을 덮고있는 다른 DIV의 모든 부모의 Z-index보다 두는 것입니다.

여기에서 문제를 이해하기위한 광범위한 정보 :http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

Answer 2

포지셔닝과 부정적인 여백은 내가 아는 요소를 겹치게하는 유일한 방법입니다. Z-Index는 브라우저에 요소를 계층화하는 방법을 명시 적으로 알려주는 데 사용됩니다.

귀하의 문제에 관해서는, 즉 컨테이너 요소 및/또는 겹치는 요소가 필요합니다. position:relative; 또는 position:absolute; z-index가 제대로 작동합니다. 누군가가 포지셔닝을 할 때 그들은 보통 그것을 가지고 있음을 암시합니다 position CSS로 설정된 속성. 또한 z-index로 작업 할 때 겹치는 요소가 서로 동일한 수준인지 확인하십시오.

도움이 되었기를 바랍니다

Answer 3

간단히 말해서, HTML 파일의 요소 순서는 스태킹 순서를 결정합니다. 요소가 다른 요소 이상이 되려면 뒷부분에서 HTML에서 오는지 확인하십시오.

스태킹 순서를 모두 동일한 포함 요소에있는 요소에서만 교체 할 수 있습니다. 예를 들어 두 개의 div가 있고 둘 다 3 개의 이미지가 포함 된 경우 두 번째 div의 이미지를 만들 수는 없습니다.

복잡한 스태킹 주문이 필요한 경우 HTML을 미리 계획해야합니다.

Answer 4

다른 답변에 의해 암시 된 바와 같이 position:relative 그리고 position:absolute IE에서 "스태킹 컨텍스트"를 재설정하십시오.

Answer 5

Lazier 답변을 원한다면 맵을 클릭하면 JavaScript를 사용하고 DIV를 숨기고지도를 닫을 때 표시 할 수 있습니다.

어쨌든 페이지의 선택 사항을 사용 하여이 작업을 수행해야합니다. 즉, Z-Index에서는 작동하지 않기 때문입니다.

Answer 6

나는 며칠 전에이 같은 문제를 겪었고 Darko Z가 제안한 부정적인 마진이 훌륭하게 작동했다는 것을 알았습니다. (내 담당자는 아직 Darko에 투표하기에 충분하지 않습니다)

나는 그것에 대한 빠른 게시물을 썼습니다.

http://www.swards.net/2009/03/layering-html-elements-without-using.html