인터넷 익스플로러에서 Z-index를 갖는 DIV 포지셔닝 DIV 7

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

문제

나는 두 개의 상대적 위치 divs a & b를 가지고 있습니다.

Firefox는 이것을 예상대로 렌더링합니다 : A'-b'-ba (가장 가까운 곳에서 사용자로부터 가장 큰 것까지), IE7에서는 : b'-b-a'-a.

누군가가 해결 방법으로 나를 도와 줄 수 있습니까? 나는 이미이 문제로 시간을 낭비했다!

미리 감사드립니다, 스테판

도움이 되었습니까?

해결책

문제는 IE7과 이전에서 기본적으로 상대적 위치 항목 내부의 z-index를 "재설정"한다는 것입니다.

이 작품 중 어느 것도 아래의 '최후의 수단'을 참조하십시오.

따라서 IE에서는 막대가 IE7의 절름발이 인덱싱 방법에서 FOO 이상입니다.

<div style="position:relative;">
  <div style="position:absolute; z-index:1000;">FOO</div>
</div>
<div style="position:relative;">
  <div style="position:absolute; z-index:1;">BAR</div>
</div>

해결 방법은 똑같이 절름발이입니다. 맨 위에 있고 싶은 항목의 부모가 바닥에 원하는 부모의 부모보다 z- 인덱스가 더 높는지 확인해야합니다. :

<div style="position:relative; z-index:2;">
  <div style="position:absolute; z-index:1000;">FOO</div>
</div>
<div style="position:relative; z-index:1">
  <div style="position:absolute; z-index:1;">BAR</div>
</div>

또는 HTML에서 먼저 오는 것을 바꿀 수 있습니다.

<div style="position:relative;">
  <div style="position:absolute; z-index:1;">BAR</div>
</div>
<div style="position:relative;">
  <div style="position:absolute; z-index:1000;">FOO</div>
</div>

참고 : 이것은 Foo와 Bar로 무언가를 겹치게하는 것을하고 있다고 가정합니다. 내 예제는 분명히 겹치지 않으므로, 당신이 그것을 완전히 복사하고 붙여 넣었는지 알기가 어렵습니다.

추가 :

마지막 수단

간단히 말해서이 옵션 짜증나. 그러나 IE7과 이전 의이 문제를 절대적으로 다루어야한다면 유일한 옵션입니다.

JavaScript를 사용하여 DIV를 움직여 필요한 곳에 위치하십시오. 여기서 기본적인 아이디어는 절대 배치 Div를 본체 노드로 끌어 당겨 필요한 위치로 이동하는 것입니다. jQuery를 사용 하여이 모든 작업을 수행하는 것이 좋습니다. jQuery가없는 예제 코드를 만들었지 만 아직 jQuery를 사용하지 않으면 시작해야합니다. 이 작업은 몇 줄로 끝날 것입니다.

<body>
    <div style="position:relative; z-index:2;"> 
        OUTERFOO 
        <div style="position:absolute; z-index:1000; background:red;">
            FOO
        </div> 
    </div> 
    <div style="position:relative; z-index:1">
        OUTERBAR 
        <div id="bar" style="position:absolute; top:-30px; z-index:1; background:green;">
            BAR
        </div>
    </div>
    <button onclick="moveThisCrapForIE7();">Test</button>
    <script type="text/javascript" language="javascript">
        // Probably best to kick this off when your body is totally loaded.
        // jQuery's $(document).ready is really good for that.
        // for now I'm just using a button to test.
        function moveThisCrapForIE7() {
            // You'll need something more reliable for browser detection here, this will only get IE7 not IE6.
            // I'd recommend jQuery for everything really. It'll save you miles of code.
            if(navigator.appVersion.indexOf('MSIE 7') > -1) {
                // Get your element and move it to where you want it.
                var bar = document.getElementById('bar');
                document.body.appendChild(bar);
                //Then you'll need to monkey with the location 
                // to make sure it's where you want it.
                bar.style.top = '15px';
                bar.style.left = '90px';
                bar.style.zIndex = '3';
            }
        }
    </script>
</body>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top