Создание элемента управления в виде стека с помощью CSS / Javascript

Question

I Я хочу создать элемент управления стекового типа, в котором последовательность составных подразделов может быть переупорядочена в пределах контейнера div.

Подразделения 'views' будут иметь одинаковый размер и абсолютно расположены друг над другом.

Кажется, что свойство z-index css применяет z-порядок на уровне документачто не имеет смысла для меня - Как элемент в данном div может иметь более высокий z-порядок, чем то, что находится после этого div?Он просто игнорирует вложенную иерархию div?

Таким образом, вопрос заключается в следующем: есть ли способ манипулировать относительным z-порядком в данном div?

Answer 1

Если вы хотите, чтобы отображался только один div, измените его непрозрачность на 1 в Firefox и на 100 в IE и установите остальные на 0. Вот пример слайд-шоу *1002*, который именно это и делает. Я полагаю, что у вас не будет таймера, поэтому вам понадобится другой метод для их переключения.

Answer 2

Как элемент в данном div может иметь более высокий z-порядок, чем то, что ставится после этого div? Это просто игнорирует вложенную иерархию div?

Z-index только изменяет «слой» (представьте себе Photoshop), на котором отображается элемент. Конструктивно коробочная модель не изменена. Визуально это выглядит так, но только в том случае, если позиционирование элементов было изменено (с помощью CSS), так что z-index действительно что-то значит. Вот пример ; обратите внимание, как B появляется над A и C событием, хотя C имеет наибольшее z-index.

Чтобы изменить z-index элементов относительно контейнера div, в котором они содержатся, вы должны убедиться, что самый низкий z-index в контейнере больше, чем самый большой z-index вне контейнер. Затем вы настраиваете другие z-index es для их смещения. Эта функция (использует jQuery) получает элемент с наибольшим значением z-index из переданных элементов:

function getTopElement(elems){
    // Store the greates z-index that has been seen so far
    var maxZ = 0;
    // Stores a reference to the element that has the greatest z-index so far
    var maxElem;
    elems.each(function(){
        var z = parseInt($(this).css("z-index"), 10);
        // Ignore z-index of auto
        if (!isNaN(z)){
            if (parseInt($(this).css("z-index"), 10) > maxZ) {
                maxElem = $(this);
                maxZ = parseInt($(this).css("z-index"), 10);
                alert (maxZ);
            }
        }
    });
    return maxElem;
};

Использование:

var topDiv = getTopElement($("div"));
var topZIndex = topDiv.css("z-index");

Это должно начать вас.

Edit:

Чтобы заполнить пропущенные z-index es, используйте этот код:

var elements = $("div");
var newZ = parseInt(getTopElement(elements).css("z-index"), 10);

elements.each(function(){
    if (isNaN(parseInt($(this).css("z-index"),10))){
        $(this).css("z-index", ++newZ);
    }

});

Что он делает, так это изменяет элементы с z-index из auto на один плюс, независимо от того, какое наибольшее z-index находится в коллекции (elements);

Чтобы понять, что я имею в виду, посмотрите это демо .