Question

我正在尝试创建一个帖子系统，这将允许我生成新帖子，但因为它将彼此重叠我正在寻找一种方法来创建一个新的div的自动创建一个不同的Z-index类。

可以用Jquery完成吗？

提前致谢

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

    z-index:10000

Answer 1

<强>已更新

我不确定你是否需要jQuery，就像你说的那样。你可以使用css float和height属性。如果你想要更漂亮的ui（click me），你可以添加过渡属性。

<强> OLD

根本不使用z-index。你确定需要吗？

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

看jQuery .css()

示例：

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

Answer 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;
    }

程序生成的Z-index使用类

2 个答案: