реверсирование z-индекса по порядку отображения страницы - PullRequest
Новая
       15

реверсирование z-индекса по порядку отображения страницы

16 голосов
/ 27 февраля 2010

Пример разметки: 

<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div>
<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div>
<div class="wrapper">
    <h2>Trigger</h2>
    <div>This is some content</div>
</div>

Пример CSS: 

.wrapper {z-index: 1}
.wrapper div {display: none; position: absolute;}

Через javascript (jQuery) Я прикрепляю событие click к каждому h2, которое затем переключает div содержимого на display: block.

Предполагается, что это расширяемые блоки контента, которые будут перекрывать все остальное на странице.

Загвоздка в том, что я бы хотел, чтобы первый перекрывал второй, который перекрывал бы третий в случае, если все они открыты.

Однако, поскольку каждый из них визуализируется ПОСЛЕ предыдущего, фактический порядок размещения меняется на противоположный (последний созданный div содержимого заканчивается наложенным выше на один ранее созданный).

Есть ли умный способ изменить это поведение с помощью CSS / HTML? Или это решение позволить странице визуализировать, а затем с помощью javascript захватить все div содержимого в порядке и дать каждому z-index в обратном порядке?

UPDATE:

Вот более конкретная разметка: 

<div style="padding: 10px;">Hello World
    <div style="position: relative; top: -5px;">
        <div style="position: absolute; background: yellow;"><p>This</p><p>is</p><p>overlapping</p></div>
    </div>
</div>
<div style="padding: 10px;">Hello World
    <div style="position: relative; top: -5px;">
        <div style="position: absolute; background: orange;"><p>This</p><p>is</p><p>overlapping</p></div>
    </div>
</div>
<div style="padding: 10px;">Hello World
    <div style="position: relative; top: -5px;">
        <div style="position: absolute; background: red;"><p>This</p><p>is</p><p>overlapping</p></div>
    </div>
</div>

Следующая разметка произведет 3 деления, каждое с наложением цветного деления. Из-за порядка рендеринга последний абсолютно позиционированный DIV (красный) будет поверх предыдущего (оранжевый).

Я не могу понять, какой тип z-индексов мне нужно применить, чтобы получить ПЕРВЫЙ цветной перекрывающийся div, чтобы он был сверху. Порядок сверху вниз с точки зрения z-index должен отражать разметку (желтый сверху, красный снизу).

Это, конечно, обратный стандарт.

Я готов использовать javascript для исправления этого пост-показа, но я все еще борюсь за точный CSS, который мне нужно применить через javascript. Это то, что я после выполнимо?

Ответы [ 4 ]

13 голосов
/ 12 августа 2011

Так что до сих пор нет ответа, я просто сделал что-то подобное, хотя мой обходной путь 100% взломать, если кто-то еще заходит на эту страницу, это сработало! 

#nav ul li:nth-child(1) {
        z-index:10; 
    }
    #nav ul li:nth-child(2) {   
        z-index:9;  
    }
    #nav ul li:nth-child(3) {
        z-index:8;  
    }
    #nav ul li:nth-child(4) {   
        z-index:7;  
    }
    #nav ul li:nth-child(5) {
        z-index:6;  
    }
    #nav ul li:nth-child(6) {   
        z-index:5;  
    }

У меня просто было это, и пока я не получил более 10 элементов, это, кажется, работает ...

8 голосов
/ 16 января 2013

Блестящая новая технология CSS flexbox делает это немного проще, но недостатком является фактическое содержание будет полностью изменено. Это не должно быть большой проблемой, это просто семантически странно.

Короче говоря: обернуть все в контейнер с этими стилями: 

display: flex;
flex-direction: column-reverse;

См. Скрипты для рабочего примера (наведите курсор на элементы wrapper, чтобы увидеть действие).

Это полезно, если вы не хотите полагаться на javascript для динамической проверки z-индексов при каждом обновлении контента. Если элементы <div class="wrapper"> вставляются на лету (или по какой-либо другой причине, определенные стили не могут быть установлены заранее) Правил CSS в примере должно быть достаточно, чтобы позаботиться о z-индексах, ЕСЛИ вы вставляете <div> s в обратный порядок.

Это ваша текущая настройка: http://jsfiddle.net/dJc8N/2/

И это тот же HTML с добавленным CSS (обратите внимание на цифры в тегах <h2>): http://jsfiddle.net/Mjp7S/1/

EDIT:

Написанный мною CSS, вероятно, еще не готов к копированию. Это, однако, это: 

display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column-reverse;
-moz-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
-o-flex-direction: column-reverse;
flex-direction: column-reverse;
6 голосов
/ 14 апреля 2016

Вот функция SASS для верхнего ответа: 

@for $i from 1 through 10 {
   &:nth-child(#{$i}) {
     z-index: #{10 - $i};
   }
}
1 голос
/ 11 января 2018

У меня была именно эта проблема, но неопределенное количество элементов и, возможно, слишком много, чтобы сделать возможным взлом CSS, опубликованный Джейми-Уилсоном. Кроме того, поскольку моя страница генерируется динамически с помощью PHP, я не хотел возиться с изменением порядка всего в DOM и использованием flexbox, как предложил Сэнди Гиффорд. Вместо этого я нашел чрезвычайно простое и элегантное решение jQuery: 

$(document).ready(function() {

  var item_count = $('your-selector').length;

  for( i = 0; i < item_count; i++ )
  {
    $('your selector').eq( i ).css( 'z-index', item_count - i );
  }

});

Я не могу сказать, насколько это эффективно, но с ~ 35 предметами я не заметил никаких задержек.

...