Problemy z warstwami indeksu Z w IE7

163

Wyizolowałem mały przypadek testowy z-indexbłędu IE7 , ale nie wiem, jak to naprawić. Bawiłem się przez z-indexcały dzień.

Co jest nie tak z z-indexIE7?

Testuj 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;
}

Testuj 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>
css internet-explorer-7 z-index rezna
źródło
Jeśli szukasz obejścia i nie zmieniasz kolejności całego kodu
Nasaralla

Odpowiedzi:

268

Indeks Z nie jest miarą bezwzględną. Możliwe jest, aby element o indeksie z: 1000 znajdował się za elementem o indeksie z: 1 - o ile odpowiednie elementy należą do różnych kontekstów układania w stos .

Kiedy określasz indeks z, określasz go względem innych elementów w tym samym kontekście stosowym i chociaż akapit specyfikacji CSS na indeksie Z mówi, że nowy kontekst układania jest tworzony tylko dla pozycjonowanej zawartości z indeksem Z innym niż auto (czyli cały dokument powinien być pojedynczy kontekst Stacking), ty zrobił skonstruować umieszczoną rozpiętość: niestety IE7 interpretuje treść umieszczona bez z-index jako nowy kontekst stosu.

Krótko mówiąc, spróbuj dodać ten CSS:

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

lub przeprojektuj dokument w taki sposób, że Twoje przęsła nie mają już pozycji: względna:

<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>

Zobacz http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/, aby zapoznać się z podobnym przykładem tego błędu. Przyczyną nadania elementowi nadrzędnemu (w twoim przykładzie koperta-1) wyższego indeksu z jest to, że wtedy wszystkie elementy podrzędne klasy koperta-1 (łącznie z menu) będą nakładać się na wszystkie rodzeństwo z koperty-1 (a konkretnie koperta-2).

Chociaż z-index pozwala wyraźnie zdefiniować, w jaki sposób rzeczy się nakładają, nawet bez z-index kolejność warstw jest dobrze zdefiniowana . Wreszcie IE6 ma dodatkowy błąd, który powoduje, że pola wyboru i ramki iframe unoszą się nad wszystkim innym.

Eamon Nerbonne
źródło
4
w końcu rozwiązałem :) - pozycja względna jest naprawdę irytująca, więc jakoś przyjąłem Twój pomysł bez elementów „koperty” - wydaje się, że rozwiązuje problem i działa - wystarczy trochę przeprojektować kod dla pola sugestii - dzięki a lot
rezna
6
Istnieją trzy różne rzeczy, które wpływają na to, jak elementy nakładają się na siebie: konteksty układania, kolejność źródeł i kolejność malowania. Najbardziej oczywiste problemy pojawiają się, gdy mamy do czynienia z kontekstami stosowymi - znajomość dwóch pozostałych pomoże ci zrozumieć bardziej ezoteryczne pułapki. Źródło: CSS-Discuss Wiki.
rjb
2
dodanie indeksu z do elementu nadrzędnego to wspaniałe rozwiązanie
Danyun Liu
2
Kocham Cię. Dodano pozycję: względną i indeks z: 500 do mojego rodzica i naprawiono to!
Aymeric Gaurat-Apelli
2
Zrobiłem manewr tego problemu komentarzami, które pokazują rozwiązanie. jsfiddle.net/fNcGu/3
Christopher Johnson,
15

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;
});
});
nixis
źródło
po przeczytaniu powyżej „prawidłowego” rozwiązania, starałem się sformułować rozwiązanie mojego znacznie bardziej złożonego problemu niż trywialny w pytaniu. potem wrzuciłem tę odpowiedź i zadziałało to jak urok. jeśli powyższe rozwiązanie jest właściwe, z pewnością jest to łatwe. dzięki!
Landon
11

W IE pozycjonowane elementy generują nowy kontekst stosu, zaczynając od wartości z-index równej 0. Dlatego z-index nie działa poprawnie.

Spróbuj nadać elementowi nadrzędnemu wyższą wartość indeksu z (może być nawet wyższa niż sama wartość indeksu z dziecka), aby naprawić błąd.

ed1nh0
źródło
1
Dzięki. To rozwiązanie zadziałało dla mnie, podając indeks z kontenera nadrzędnego, niekoniecznie wyższy niż indeks z dziecka.
neelmeg
4

Napotkałem ten problem, ale w dużym projekcie, w którym trzeba było poprosić o zmiany HTML, i stało się to całym problemem, więc szukałem czystego rozwiązania CSS.

Umieszczając position:relative; z-index:-1na mojej głównej treści, zawartość rozwijanego nagłówka nagle wyświetlała się nad zawartością treści w IE7 (była już wyświetlana bez problemu we wszystkich innych przeglądarkach i ie8 +)

Problem z tym polegał na tym, że wyłączono wszystkie akcje najechania i kliknięcia na całą zawartość w elemencie z, z-index:-1więc poszedłem do elementu nadrzędnego całej strony i nadałem muposition:relative; z-index:1

Który rozwiązał problem i zachował poprawną funkcjonalność warstw.

Czuje się trochę dziwnie, ale działał zgodnie z wymaganiami.

lukeroxout
źródło
3

Zauważyłem, że muszę umieścić specjalne oznaczenie indeksu Z na div w arkuszu styels specyficznym dla IE7:

div {z-index: 10; }

Aby indeks z niepowiązanych elementów div, takich jak nav, był wyświetlany nad suwakiem. Nie mogłem po prostu dodać indeksu Z do samego dzielnika suwaka.

Rozwiązania eBar
źródło
Okazało się, że to oprócz tego, że html {z-index:1; position:relative;}pozwoliło menu przejść przez obraz karuzeli w IE.
bassplayer7
2

Jeśli wspomniane wcześniej wyższe indeksowanie z w węzłach nadrzędnych nie odpowiada Twoim potrzebom, możesz stworzyć alternatywne rozwiązanie i skierować je do problematycznych przeglądarek za pomocą komentarzy warunkowych IE lub używając (bardziej idealistycznego) wykrywania funkcji dostarczanego przez Modernizr.

Szybki (i oczywiście działający) test dla 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;
});
sferoida
źródło
Bardzo dobrze! Wykrywanie funkcji jest zdecydowanie najlepszym rozwiązaniem.
Jason
1

Wygląda na to, że nie jest to błąd ie, tylko dla innego zrozumienia niż standard css. Jeśli kontener zewnętrzny nie jest określony, indeks z, ale element wewnętrzny ma wyższy indeks z. Więc rodzeństwo kontenera może nałożyć element o wysokim indeksie z. Nawet jeśli tak, to występuje tylko w IE7, ale IE6, IE8 i Firefox są w porządku.

c2j
źródło
0

Ogólnie w IE6, niektóre elementy interfejsu użytkownika są implementowane z natywnymi kontrolkami. Te kontrolki są renderowane w całkowicie oddzielnej fazie (okno?) I zawsze pojawiają się nad innymi kontrolkami, niezależnie od z-index. Pola wyboru to kolejna taka problematyczna kontrola.

Jedynym sposobem obejścia tego problemu jest utworzenie treści, które IE renderuje jako osobne „okno” - tj. Możesz umieścić pole wyboru nad polem tekstowym lub, co bardziej przydatne, ramką iframe.

Krótko mówiąc, musisz umieścić elementy „po najechaniu”, takie jak menu, w ramce iframe, aby umożliwić IE umieszczenie tych elementów powyżej wbudowanych elementów sterujących interfejsu użytkownika.

Powinno to zostać naprawione w IE7 (patrz http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx ), ale być może pracujesz w jakimś trybie zgodności?

Eamon Nerbonne
źródło
wiem o błędzie indeksu z w IE6 - i jest to naprawione - ale jest inny problem ze względnie / absolutnie pozycjonowaniem elementów / danych wejściowych w IE7 (który jest naprawiony w IE8) - znalazłem kilka rozwiązań (gra z indeksami z), ale żaden z nich nie pracował - dlatego tam pytam ... W każdym razie dzięki za odpowiedź.
rezna
0

Ten błąd wydaje się być nieco osobnym problemem niż standardowy błąd IE w oddzielnym kontekście stosowym. Miałem podobny problem z wieloma ułożonymi w stos wejściami (zasadniczo z tabelą z autouzupełnianiem w każdym wierszu). Jedynym rozwiązaniem, jakie znalazłem, było przypisanie każdej komórce malejącej wartości indeksu z.

Jeremy Kauffman
źródło
0

Jeśli chcesz utworzyć menu rozwijane i masz problem z indeksem z, możesz go rozwiązać, tworząc indeksy z o tej samej wartości (indeks z: 999; na przykład). Po prostu umieść indeks z w nadrzędnych i podrzędnych elementach div i to rozwiąże problem. Rozwiązuję z tym problem. Jeśli wstawię różne indeksy Z, oczywiście, pokaże to mój podrzędny element DIV nad moim nadrzędnym elementem DIV, ale gdy chcę przenieść mysz z karty menu do elementu DIV podmenu (lista rozwijana), znika ... wtedy wstawiam indeksy z o tej samej wartości i rozwiązuję problem.

Marko
źródło
0

Rozwiązałem to, używając narzędzi programistycznych dla IE7 (jest to pasek narzędzi) i dodając ujemny indeks z do kontenera elementu div, który będzie poniżej drugiego elementu div.

Lucas
źródło