Проблемы наслоения IE7 Z-Index

163

Я выделил небольшой контрольный пример z-indexошибки IE7 , но не знаю, как ее исправить. Я играл 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>

css internet-explorer-7 z-index rezna
источник

Если вы ищете обходной

путь,

268

Z-индекс не является абсолютным измерением. Элемент с z-index: 1000 может находиться позади элемента с z-index: 1 - до тех пор, пока соответствующие элементы принадлежат разным контекстам стека .

Когда вы указываете z-index, вы указываете его относительно других элементов в том же контексте стека, и хотя в параграфе спецификации CSS на Z-index говорится, что новый контекст стека создается только для позиционированного контента с z-индексом, отличным от auto (то есть весь ваш документ должен представлять собой единый контекст стекирования), вы создали позиционированный диапазон: к сожалению, IE7 интерпретирует позиционированный контент без z-index как новый контекст стека.

Короче, попробуйте добавить этот 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-index позволяет вам явно определить, как все перекрывается, даже без z-index порядок наложения четко определен . Наконец, в IE6 есть дополнительная ошибка, из-за которой селекторы и фреймы плавают поверх всего остального.

Имон Нербонн
источник

4

наконец решил это :) - относительная позиция действительно раздражает, так что я каким-то образом принял вашу идею без элементов 'envelope' - кажется, это решает проблему и также работает - просто нужно немного переделать код для подсказки - thx a Лот

Резна

6

Существуют три разные вещи, которые влияют на то, как элементы перекрывают друг друга: контексты стека, порядок источника и порядок рисования. Наиболее очевидные проблемы возникают при работе с контекстами стеков - знание двух других поможет вам понять более эзотерические особенности. Источник: CSS-Discuss Wiki.

RJB

2

Добавление z-индекса к родительскому элементу - замечательное решение

Данюн Лю

2

Я тебя люблю. Добавил позицию: относительный и z-индекс: 500 к моему родителю, и это исправило это!

Aymeric Gaurat-Apelli

2

Я сделал скрипку этой проблемы с комментариями, которые демонстрируют решение. jsfiddle.net/fNcGu/3

Кристофер Джонсон,

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
источник

Прочитав «правильное» решение выше, я попытался сформулировать решение для моей значительно более сложной проблемы, чем тривиальная в вопросе. затем я бросил этот ответ, и он работал как шарм. Если приведенное выше решение является правильным, это, безусловно, самый простой. Спасибо!

Лэндон

11

В IE позиционированные элементы генерируют новый контекст стека, начиная со значения z-index, равного 0. Поэтому z-index работает неправильно.

Попробуйте дать родительскому элементу более высокое значение z-index (может быть даже выше, чем само значение дочернего z-index), чтобы исправить ошибку.

ed1nh0
источник

1

Спасибо. Это решение сработало для меня, дав z-индекс родительского контейнера, не обязательно выше, чем дочерний z-индекс.

neelmeg

4

Я столкнулся с этой проблемой, но в большом проекте, где нужно было запрашивать изменения HTML, и он стал целой проблемой, поэтому я искал чисто CSS-решение.

При размещении position:relative; z-index:-1основного содержимого моего тела выпадающий заголовок неожиданно отображался над содержимым основного текста в ie7 (он уже отображался без проблем во всех других браузерах и в ie8 +)

Проблема с этим заключалась в том, что это отключало все действия при наведении и щелчке для всего содержимого в элементе, z-index:-1поэтому я перешел к родительскому элементу всей страницы и дал емуposition:relative; z-index:1

Что решило проблему и сохранило правильную функциональность наслоения.

Чувствует себя немного хакером, но работал как надо.

lukeroxout
источник

3

Я обнаружил, что мне нужно было поместить специальное обозначение z-index на div в таблице стилей ie7:

div {z-index: 10; }

Для показа z-index несвязанных элементов div, таких как nav, над ползунком. Я не мог просто добавить z-index в сам div слайдера.

Решения eBar
источник

Я обнаружил, что это в дополнение к тому, html {z-index:1; position:relative;}что меню позволяет просматривать карусель в IE.

bassplayer7

2

Если ранее упомянутое более высокое z-индексирование в родительских узлах не соответствует вашим потребностям, вы можете создать альтернативное решение и нацелить его на проблемные браузеры либо с помощью условных комментариев IE, либо с помощью (более идеалистической) функции обнаружения, предоставляемой 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;
});

сфероид
источник

Очень хорошо! Обнаружение функций, безусловно, путь.

Джейсон

1

Это выглядит не как ошибка ie, просто для различного понимания стандарта css. Если вне контейнера не указан z-индекс, но во внутреннем элементе указан более высокий z-индекс. Так что брат и сестра контейнера могут перекрывать элемент с высоким z-индексом. Даже если это так, это происходит только в IE7, но IE6, IE8 и Firefox в порядке.

c2j
источник

0

В целом, в IE6 определенные элементы пользовательского интерфейса реализованы с собственными элементами управления. Эти элементы управления отображаются в совершенно отдельной фазе (окно?) И всегда отображаются над любыми другими элементами управления, независимо от z-индекса. Селект-боксы - еще один такой проблемный элемент управления.

Единственный способ обойти эту проблему - создать контент, который IE отображает как отдельное «окно» - т.е. вы можете поместить поле выбора над текстовым полем или, что более полезно, iframe.

Короче говоря, вам нужно помещать такие элементы, как меню, в iframe, чтобы позволить IE размещать эти элементы управления над встроенным пользовательским интерфейсом.

Это должно было быть исправлено в IE7 (см. Http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx ), но, возможно, вы работаете в каком-то режиме совместимости?

Имон Нербонн
источник

я знаю об ошибке z-index в IE6 - и это исправлено - но есть еще одна проблема с относительно / абсолютно позиционными элементами / входами в IE7 (которая исправлена в IE8) - я нашел пару решений (игра с z-индексами), но Никто из них не работал - вот почему я спрашиваю там ... Во всяком случае, спасибо за ответ.

Резна

0

Эта ошибка кажется чем-то отдельным, чем стандартная ошибка IE в отдельном контексте стека. У меня была похожая проблема с несколькими стековыми входами (по сути, таблица с автозаполнением в каждой строке). Единственное решение, которое я нашел, - дать каждой ячейке уменьшающееся значение z-index.

Джереми Кауфман
источник

0

Если вы хотите создать выпадающее меню и иметь проблему с z-index, вы можете решить ее, создав z-index с одинаковым значением (z-index: 999; например). Просто поместите z-index в родительские и дочерние div и это решит проблему. Я решаю проблему с этим. Если я добавлю разные z-индексы, конечно, он покажет мой дочерний div поверх моего родительского div, но, как только я захочу переместить мою мышь с вкладки меню в div подменю (выпадающий список), он исчезнет ... затем я ставлю z-индексы одинакового значения и решаю проблему ..

Marko
источник

0

Я решил это, используя инструменты разработчика для IE7 (панель инструментов) и добавив отрицательный z-индекс в контейнер div, который будет ниже другого div.

Лукас
источник

Проблемы наслоения IE7 Z-Index

Ответы: