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

【问题标题】：Creating a stack-view control with CSS/Javascript使用 CSS/Javascript 创建堆栈视图控件
【发布时间】：2010-09-13 08:12:57
【问题描述】：

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

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

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

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

谢谢，亚林

【问题讨论】：

标签： javascript css html z-index

【解决方案1】：

给定 div 中的元素如何具有比某物更高的 z 阶放在那个div之后？这只是忽略嵌套的 div 层次结构？

Z-index 仅修改显示元素的“图层”（想象一下 Photoshop）。在结构上，盒子模型没有改变。从视觉上看，它似乎是，但前提是元素的位置已被修改（通过 CSS），以便 z-index 实际上意味着什么。 Here's an example;注意B 是如何出现在A 和C 事件上方的，尽管C 具有最大的z-index。

要修改元素的z-index，相对于包含它们的容器div，您必须确保容器中最小的z-index大于容器外部的最大z-index容器。然后，您调整其他 z-indexes 以抵消它们。此函数（使用 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 或auto 的元素更改为集合中最大的z-index (elements) 的加一；

要明白我的意思，check out this demo。

【讨论】：

@SimpleCoder-谢谢，但您的示例链接不完整-没有“C”元素，因此我无法理解您的解释。你介意修一下吗？
@Yarin- 我已经修好了，现在试试链接
谢谢，仍然在解决第一个问题：当您提供的 getTopElement 函数中元素的 z-index = "auto" 时会发生什么？
首先，我只是修复了函数中的一个小错误（见编辑）。要回答您的问题，z-index 或 auto 的元素上的 $(element).css("z-index"); 将返回字符串 auto。这对我的函数有问题，因为它无法将其解析为整数。该功能已更改为忽略auto的z-indexes。

【解决方案2】：

如果您只希望一个 div 可见，则在 Firefox 中将其不透明度更改为 1，在 IE 中将其不透明度更改为 100，并将其他设置为 0。这里有一个 slide show example 可以做到这一点。我想您的不会基于计时器，因此您需要其他方法来切换它们。

【讨论】：