使用类程序生成的 Z-index答案

【问题标题】：Procedural generated Z-index using classes使用类程序生成的 Z-index
【发布时间】：2014-05-05 19:38:18
【问题描述】：

我正在尝试为帖子创建一个系统，该系统将允许我生成新帖子，但由于它会相互重叠，我正在寻找一种在创建新 div 时自动创建不同 Z-index 的方法类。

可以用 Jquery 完成吗？

提前致谢

这里是一个 JsFiddle，用于直观地展示我所拥有的和正在寻找的东西。

    z-index:10000

【问题讨论】：

它可能可以，如果 jQuery 可以找到现有属性并将++i 应用于它们（或其他东西）并将新的属性作为属性应用于新项目，我不明白为什么不这样做。

标签： jquery html css class z-index

【解决方案1】：

更新

我不确定你是否需要 jQuery，正如你所说的那样。你可以只玩css float 和 height 属性。如果你想要更漂亮的 UI，可以添加过渡属性 (click me)。

旧

使用z-index 根本不是一个好主意。你确定你需要它吗？

是的，您可以通过 jQuery 管理元素 css。

看jQuery .css()

例子：

var counter = 0;
//work with counter
$("#someId").css("z-index", counter);

【讨论】：

我更喜欢它，我正在尝试生成一个可以在 :hover 上扩展的 div，但不希望在发生这种情况时整个页面都被分解。除了 z-index 之外，我不知道任何其他方法可以使 div 不发生碰撞。感谢您的 jquery 参考 +1
@Fyxerz 你可以给它们绝对位置，并让它们部分移出屏幕一侧。
@Luxelin 为元素提供绝对定位不会使其工作，因为它们只会堆叠一个。

【解决方案2】：

您实际上并不需要依赖 JS 来分配增量 z-index。相反，我们可以只增加悬停元素的 z-index，使其与其余元素重叠。

See fiddle here

我的诀窍是依靠 jQuery 复制每个 .article 元素的内容，默认情况下它是隐藏的，只有在悬停时才会显示：

$(function() {
    $('.article').each(function() {
        // Create duplicate
        var $dup = $('<div />', {
            'class': 'duplicate'
        }).html($(this).html());

        // Append duplicate
        $dup.appendTo($(this));
    });
});

这是更新后的 CSS：

.article{
    width:200px;
    height:200px;
    background-color: blue;  
    margin: 20px;
    float: left;
    display: inline-block;
    /* We set their positions to relative so that z-index works */
    position: relative;
    z-index: 1;
}
    .article:hover {
        /* Increase z-index when hovered on, ensures overflowing content overlaps neighbouring/adjacent divs */
        z-index: 2;
    }

.article > .duplicate {
    background-color: red;
    display: none;
    position: absolute;
}
    .article:hover > .duplicate {
        display: block;
        height: 400px;
        top: 0;
        left: 0;
        right: 0;
    }

【讨论】：