[css] IE7 Z 인덱스 계층화 문제

Program / 글쓴이

IE7의 z-index버그에 대한 작은 테스트 사례를 격리 했지만 해결 방법을 모릅니다. 나는 z-index하루 종일 놀고 있습니다.

z-indexIE7의 문제점은 무엇입니까 ?

CSS 테스트 :

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

HTML 테스트 :

<form>
  <label>Input #1:</label>
  <span id="envelope-1" class="envelope">
    <input name="my-input-1" id="my-input-1" />
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
  </span>
  <br><br>
  <label>Input #2:</label>
  <span id="envelope-2" class="envelope">
    <input name="my-input-2" id="my-input-2" />
  </span>
</form>

답변

Z- 색인은 절대 측정이 아닙니다. 각 요소가 서로 다른 스태킹 컨텍스트에 속하는 한 z-index : 1000을 가진 요소가 z-index : 1을 가진 요소 뒤에있을 수 있습니다 .

z- 색인을 지정하면 동일한 스태킹 컨텍스트에서 다른 요소와 관련하여 지정합니다 . Z- 색인의 CSS 사양 단락에 새 스태킹 컨텍스트가 아닌 z- 색인이있는 위치 지정된 컨텐츠에 대해서만 새 스태킹 컨텍스트가 작성되었다고 표시됩니다. 자동차 , 당신은 (전체 문서를 의미 하나의 스택 문맥해야한다) 한 불행하게도 IE7 해석 위치 내용을 Z- 인덱스없이이 같은 새로운 스택 문맥을 : 위치 지정 범위를 구성.

간단히 말해서이 CSS를 추가해보십시오.

#envelope-1 {position:relative; z-index:1;}

또는 범위가 더 이상 위치 : 상대를 갖지 않도록 문서를 다시 디자인하십시오.

<html>
<head>
    <title>Z-Index IE7 Test</title>
    <style type="text/css">
        ul {
            background-color: #f00;
            z-index: 1000;
            position: absolute;
            width: 150px;
        }
    </style>
</head>
<body>
    <div>
        <label>Input #1:</label> <input><br>
        <ul><li>item<li>item<li>item<li>item</ul>
    </div>

    <div>
        <label>Input #2:</label> <input>
    </div>
</body>
</html>

이 버그의 유사한 예는 http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ 를 참조 하십시오 . 상위 요소 (예 : 봉투 -1)에 z- 색인이 더 높은 작업을하는 이유는 봉투 -1의 모든 하위 (메뉴 포함)가 봉투 -1의 모든 형제 (특히 봉투 -2)와 겹치기 때문입니다.

z- 인덱스를 사용하면 항목이 겹치는 방식을 명시 적으로 정의 할 수 있지만 z- 인덱스 없이도 레이어 순서가 잘 정의되어 있습니다. 마지막으로, IE6에는 선택 상자와 iframe이 다른 모든 것 위에 떠 다니는 추가 버그가 있습니다.

답변

http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
    $(this).css('zIndex', zIndexNumber);
    zIndexNumber -= 10;
});
});

답변

IE에서 위치가 지정된 요소는 z- 색인 값 0으로 시작하여 새로운 스태킹 컨텍스트를 생성합니다. 따라서 z- 색인이 제대로 작동하지 않습니다.

버그를 수정하려면 부모 요소에 더 높은 z- 색인 값 (자식의 z- 색인 값 자체보다 더 높을 수 있음)을 제공하십시오.

답변

이 문제가 발생했지만 HTML 변경을 요청하고 전체 문제가 된 대규모 프로젝트에서 순수한 CSS 솔루션을 찾고있었습니다.

position:relative; z-index:-1내 본문 내용 을 배치 하면 ie7의 헤더 내용이 갑자기 본문 내용 위에 표시됩니다 (이미 다른 모든 브라우저와 ie8 +에서 문제없이 이미 표시되었습니다)

그 문제는 요소의 모든 콘텐츠에 대한 모든 호버 및 클릭 작업을 비활성화 z-index:-1했기 때문에 전체 페이지의 부모 요소로 이동하여position:relative; z-index:1

문제를 해결하고 올바른 레이어 기능을 유지했습니다.

약간 해키 느낌이지만 필요에 따라 작동했습니다.

답변

ie7 전용 styelsheet의 div에 특수 z- 인덱스를 지정해야한다는 것을 알았습니다.

div {z- 색인 : 10; }

탐색 창과 같이 관련되지 않은 div의 z- 색인의 경우 슬라이더 위에 표시됩니다. 슬라이더 div 자체에 z- 색인을 추가 할 수 없었습니다.

답변

앞서 언급 한 상위 노드에서 더 높은 z- 인덱싱이 사용자 요구에 맞지 않으면 대안 솔루션을 작성하여 IE 조건부 주석 또는 Modernizr에서 제공하는 (보다 이상적인) 기능 감지를 사용하여 문제가있는 브라우저를 대상으로 할 수 있습니다.

Modernizr에 대한 빠른 (그리고 분명히 작동하는) 테스트 :

Modernizr.addTest('compliantzindex', function(){
    var test  = document.createElement('div'),
        fake = false,
        root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
        }());

    root.appendChild(test);
    test.style.position = 'relative';
    var ret = (test.style.zIndex !== 0);
    root.removeChild(test);

    if (fake) {
        document.documentElement.removeChild(root);
    }

    return ret;
});

답변

CSS 표준에 대한 다른 이해를 위해 버그가 아닌 것처럼 보입니다. 외부 컨테이너가 z- 색인을 지정하지 않은 경우 내부 요소가 더 높은 z- 색인을 지정했습니다. 따라서 컨테이너의 형제는 높은 z- 인덱스 요소를 오버레이 할 수 있습니다. 그런 경우에도 IE7에서만 발생하지만 IE6, IE8 및 Firefox는 정상입니다.