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

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

<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 контента end sup перекрывает ранее созданный один раз).

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

ОБНОВИТЬ:

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

<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, каждый из которых будет перекрываться цветным элементом div. Из-за порядка рендеринга последний абсолютно позиционированный DIV (красный) будет поверх предыдущего (оранжевый).

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

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

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


z-index overlap reverse
person DA.    schedule 26.02.2010    source источник
comment
Я бы тоже хотел увидеть ответ на этот вопрос! У меня точно такая же проблема, за исключением того, что я не буду знать заранее, сколько их нужно складывать!   -  person n8wrl    schedule 22.12.2010
comment
Было бы круто, если бы функции css3 можно было использовать в качестве значений для z-index. И.Е.: counter-increment: my-counter; z-index: counter(my-counter, decimal); ИЛИ z-index: calc(xpos+1), но у меня не получается.   -  person skibulk    schedule 09.10.2014

Ответы (4)


arrow_upward
15
arrow_downward

Так что здесь до сих пор нет ответа, я только что сделал что-то подобное, хотя мой обходной путь - 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 элементов, кажется, что это работает...

person jamie-wilson    schedule 11.08.2011
comment
На самом деле это отличное решение, потому что оно не требует вычислений на стороне клиента после загрузки, в отличие от javascript. Единственное, что может сделать его 0% взломом, — это использовать SASS или LESS для генерации этих свойств, а не жестко кодировать их, а затем оборачивать в какой-то миксин... что я и собираюсь сделать сейчас :). Спасибо. - person Mosselman; 10.07.2013
comment
Сделано это с помощью SASS — gist.github.com/ssidelnikov/6271776. Надеюсь, это будет полезно для кого-то. - person Stan Sidel; 19.08.2013
comment
Это работает только в том случае, если вы хотите установить z-index для прямых детей. Я думаю, что исходный вопрос, хотя и немного неясный, пытался повлиять на z-index внутренних (position: absolute) div, что было бы невозможно с nth-child. Я искал способ установить z-index определенных элементов на странице, что, вероятно, невозможно. - person Sander Verhagen; 06.02.2017

arrow_upward
11
arrow_downward

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

@for $i from 1 through 10 {
   &:nth-child(#{$i}) {
     z-index: #{10 - $i};
   }
}
person Matthew Leonard    schedule 13.04.2016

arrow_upward
9
arrow_downward

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

Вкратце: оберните все в контейнер с этими стилями:

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

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

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

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

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

ИЗМЕНИТЬ:

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;
person Dori    schedule 15.01.2013
comment
Это отличное решение! Это не работало в IE11, тогда я заметил несколько ошибок в определении свойств отображения для поддержки старых браузеров. Вот решение css-tricks: css-tricks.com/using-flexbox и я обновил скрипт: jsfiddle.net/Mjp7S/8, который теперь работает в IE11. Спасибо еще раз. - person pmrotule; 20.11.2016

arrow_upward
1
arrow_downward

У меня была именно эта проблема, но неопределенное количество элементов и, возможно, слишком много, чтобы сделать возможным хак 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 элементами я не заметил никаких задержек.

person dannymcgee    schedule 10.01.2018