使用 CSS/Javascript 创建堆栈视图控件

Question

我想创建一个堆栈类型控件，其中一系列堆叠的子 div 可以在容器 div 内重新排序。

子分区“视图”的大小相同，并且绝对位于彼此之上。

z-index css 属性似乎在文档级别应用 z 顺序，这对我来说毫无意义 - 给定 div 中的元素如何具有比放置在该 div 之后的元素更高的 z 顺序？它只是忽略了嵌套的 div 层次结构？

所以问题是：有没有办法在给定的 div 内操纵相对 z 顺序？

谢谢， 亚林

Answer 1

如果您只希望一个 div 可见，则将其不透明度在 Firefox 中更改为 1，在 IE 中更改为 100，并将其他设置为 0。这是一个 幻灯片放映示例就是这样做的。我想你的不会基于计时器，所以你需要一些其他方法来切换它们。

Answer 2

给定 div 中的元素如何具有
比某物更高的 z 顺序
放置在该 div 之后？它只是
忽略嵌套的 div 层次结构？

Z-index 仅修改显示元素的“图层”（想象一下 Photoshop）。从结构上来说，盒子模型没有改变。从视觉上看，似乎是这样，但前提是元素的位置已被修改（通过 CSS），以便 z-index 实际上具有某种含义。 这是一个示例；请注意 B 如何出现在 A 和 C 事件之上，尽管 C 具有最大的 z-index.

要修改元素的 z-index，相对于它们所在的容器 div，您必须确保最低的 z-indexz-index 大于容器外的最大 z-index。然后，调整其他 z-index 来抵消它们。此函数（使用 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");

这应该可以帮助您开始。

编辑：

要填充缺失的 z-indexes，请使用以下代码：

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 为 < code>auto 为集合中最大的 z-index 的一加 (elements)；

要明白我的意思，查看此演示。