Изменение 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 для отображения: block.

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

Уловка заключается в том, что я бы хотел, чтобы первый перекрывал второй, который перекрывал бы 3-й в том случае, если все они открыты.

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

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

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

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

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

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

Ответ 1

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

Ответ 2

Блестящая новая технология 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;

Ответ 3

Здесь используется функция SASS для верхнего ответа:

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

Ответ 4

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