Вопрос по jquery, css – Как повернуть z-index на сложенные div

4

У меня есть несколько столбцов на странице, завернутые в div таким образом:

<div class="first column" style="width:33%; float: left;"></div>
<div class="column" style="width:33%; float: left;"></div>
<div class="last column" style="width:33%; float: left;"></div>

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

Здесь CSS

#reader .column {
    position:absolute;
    top:0;
    left:0;
    background:#fff;
}

Что я могу сделать, чтобы изменить порядок наложения? Лучшее решение использовать jQuery для добавления z-индекса к каждому div? Я не совсем, как это сделать, JS не моя сила. Это также кажется мне хрупким. Есть ли способ просто изменить порядок наложения? Вот мой очень простой jQuery:

$(function(){
    $('#reader-inner').columnize();
    $('.column').click(function() {
      $(this).clearQueue().animate({left:'-550'},500, 'swing');
    });
});
Да, похоже, он не меняет порядок индексов элементов. В итоге я выяснил, как использовать каждый метод jQuery и вычесть индекс div из числа столбцов, чтобы установить z-index в прогрессии. Я просто пока не могу обновить свой ответ. Slick23
use z-index в ваших .column divs Salil Momin
Гарантируя, что более высокий z-индекс идет к элементу, чтобы быть на вершине, достаточно. Здесь будет 2 на первом, 1 на втором и 0 на последнем, или со значениями, предоставленными @SalilMomin в его ответе. Developer.mozilla.org / о / CSS / Understanding_z индекс своих объяснениях @ выходит далеко за рамки этого. Просто проверьте в меньших IE, каков результат, они чертовски глючат. FelipeAls
ты пытался использоватьfloat: right вместо тогоfloat: left ? Vitaly Muminov

Ваш Ответ

3   ответа
1

Вот чем я закончил:

$('.column').each(function(i, c) {
        $(c).css('z-index', num - i);
    });

Где num - это количество столбцов на странице плюс произвольное количество, основанное на самом высоком z-индексе в других элементах.

0
Получите длину / количество элементов Снять с этого номера. Умножьте на число, подобное 10, чтобы вы не достигли z-index 1 или 0.

.

.somecontainer").children('div').get();
$.each(rows, function(index, ele) {
    $(ele).css({"z-index": (rows.length - i) * 10 });
});
-1

Проверь это,http: //jsfiddle.net/9EKK2

Просто используйте этот CSS в своем рабочем коде ...

Проблема в том, что в некоторых ситуациях может быть 10 или сотня делений. Это не может быть жестко закодировано в CSS. Slick23
Вы можете управлять этим динамически с помощью php или javascript ... это легко Salil Momin
И вот в чем вопросбы спрашиваю, как справиться с JS. Я не использую PHP. Slick23

Похожие вопросы