Z-индекс не перекрывает дивы дальше в DOM - PullRequest
Новая
       305

Z-индекс не перекрывает дивы дальше в DOM

1 голос
/ 31 июля 2010

Я пытаюсь создать систему, похожую на всплывающую подсказку, в которой событие mouseenter вызывает появление элемента div, который будет перекрывать содержимое.К сожалению, проблема, с которой я столкнулся, заключается в том, что содержимое позже в DOM не исчезает в IE7, в то время как ранее содержимое правильно исчезает за z-indexed элементом.

Вот примеркод, который иллюстрирует проблему: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>

<style>
  .container { margin-top: 200px; }
  .node { float: left; width: 100px; height: 100px; background: #eee; margin-right: 50px; position: relative;}
  .two { position: absolute; left: -200px; top: 20px; width: 500px; height: 500px; background: green; z-index: 200;}
</style>

<div class="container">
<div class="node">
  <div class="one"></div>
</div>
<div class="node">
  <div class="two"></div>
</div>
<div class="node">
  <div class="three"></div>
</div>
</div>
</body>
</html>

Суть довольно проста.3 одинаковых серых ящика.За исключением одной из этих коробок есть всплывающая подсказка (гигантская зеленая коробка).Если вы просматриваете это в Firefox, он работает нормально.Если вы посмотрите на него в IE7, вы заметите, что зеленое поле перекрывает первый узел, второй узел, но третий узел просвечивает.Кроме того, если вы установите свойство z-index: 1 на .node, вы заметите, что оно демонстрирует то же поведение даже в Firefox.

SOLUTION

Благодаряответ ниже я смог выровнять на правильном пути.Сначала установите z-index всех всплывающих подсказок на самый высокий элемент.Затем установите z-индекс всех элементов узла на меньшее число.Я использовал 10 и 0. Затем, при наведении курсора, установить z-индекс элемента старшего брата должен быть выше, чем его братья, я использовал 5. В этом случае, если я хочу, чтобы .child2 был поверх всего, тогдаМне нужно установить z-индекс старшего родителя, который является братом для всего, что я хочу наложить (это может быть несколько родителей в цепочке).В данном случае это узел.Таким образом, z-индекс узла, который содержит .two, должен быть выше, чем z-индекс другого .node.Аналогично, если бы всплывающая подсказка находилась в узле -> подузел -> всплывающая подсказка, а этот узел был смежен с похожими деревьями, то мне нужно было бы установить z-индекс узла (2 родителя вверх).

Ответы [ 2 ]

4 голосов
/ 31 июля 2010

Старые IE запускают каждый новый позиционный стек с z-индексом 0, если он не установлен (вместо того, чтобы обращать внимание на родительский узел) - в результате последние узлы в разметке всегда затеняют более ранние узлы.

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

Используя небольшую свободу в своем примере для упрощения, скажем, у вас есть разметка, подобная этой: 

<div class="container">
 <div class="node1">
  <div class="child1"></div>
 </div>
 <div class="node2">
  <div class="child2"></div>
 </div>
 <div class="node3">
  <div class="child3"></div>
 </div>
</div>

Вы хотели бы z-индексировать элементы "nodeX" в порядке убывания по всей странице (все они должны быть на одном уровне вложенности), а затем вы можете дать их дочерним значениям z-index, что будет иметь смысл.

Ваш базовый CSS будет выглядеть следующим образом: 

/* parent nodes in descending order at same nest level */
.node1 { z-index: 99; }
.node2 { z-index: 98; }
.node3 { z-index: 97; }

/* child nodes contain tooltip data, z-index higher than parent */
.child1 { z-index: 101; display: none; }
.child2 { z-index: 101; display: none; }
.child3 { z-index: 101; display: none; }

... и когда вы хотите отобразить один из дочерних элементов в качестве всплывающей подсказки, вам нужно будет установить его родительский z-Индекс выше других родителей.В этом случае мы хотим активировать всплывающую подсказку .child2, которая находится внутри .node2: 

.node2 { z-index: 100; }
.child2 { display: block; }

Когда вы устанавливаете .node2 в z-index над всеми другими элементами ".nodeX", он (и его дочерние элементы) должны иметь возможность скрывать узлы на одном и том же уровне вложенности.

Автоматизация процесса

Очевидно, это может быть основной проблемой при настройке... достаточно просто установить несколько ручных записей для чего-то вроде небольшого жестко выпадающего меню, которое должно перекрывать себя, но если вы динамически генерируете страницу, то вы, вероятно, достаточно сообразительны, чтобы использовать javascript, чтобы помочь вам.

Важно то, что все нисходящие значения z-индекса должны быть на одинаковом уровне вложенности в вашем DOM-дереве, я не могу этого подчеркнуть.Чтобы установить нисходящие значения для всех наших элементов nodeX в примере (начиная с 99), я мог бы использовать некоторый код jQuery, подобный этому: 

$(document).ready( function() {
    var zidx = 99;
    $('.container>div').each( function() {
        $(this).css('z-index',zidx);
        zidx--;
    });
});

В основном мы просто перебираем элементы на определенном уровне и даемкаждый последующий элемент - это z-индекс, который на один ниже.Очевидно, вам нужно обратить внимание на количество элементов, которые вы можете использовать, и соответственно выбрать диапазон.

1 голос
/ 31 июля 2010

IE неправильно реализует алгоритм порядка размещения.Вам нужно будет динамически изменить z-индекс «текущей» всплывающей подсказки, чтобы в зависимости от того, какой активный .node, присвоить ему z-индекс, скажем, 10, а когда откроется другая подсказка, переназначить его на начальное значение.

Насколько мне известно, не существует настоящего решения CSS без изменения исходного порядка.

...