使用js更改z-index

Question

我在用z-index进行js更改时遇到问题： 我有一堆卡片

.card
{
    background: rgb(70, 70, 70);
    width: 300px;
    padding-bottom: 10px;
    float: left;
    margin: 100px 5px 0 5px;
    opacity: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    transition: 1s;
    z-index: -1 !important;
}

然后我用js更改了一些属性：

window.onload = function()
{
    var cards = document.querySelectorAll(".card");
    for (let i = 0; i < cards.length; i++)
    {
        cards[i].style.margin = "0 5px 0 5px";
        cards[i].style.opacity = "1";
    }
    for (let i = 0; i < cards.length; i++)
    {
        cards[i].style.transition = ".4s";
    }
    for (let i = 0; i < cards.length; i++)
    {
        cards[i].onmouseover = function()
        {
            cards[i].style.zIndex = "9";
            cards[i].style.transform = "scale(1.1)";
        }
        cards[i].onmouseout = function()
        {
            cards[i].style.zIndex = "-1";
            cards[i].style.transform = "scale(1)";
        }
    }
}

如果将鼠标悬停在第一张卡上，一切都很好，它将越过第二张卡，但是当我将鼠标悬停在第二张卡上并尝试再次将鼠标悬停在第一张卡上时，它会损坏：Gif for a better understanding of my problem

我不是js方面的专家，因此，如果出现严重错误，请指出，但不要刻薄。

我在默认CSS中尝试了!important标签，但是当我检查第二张卡片保留z-index: -1的元素并且第一张卡片保留了{{1}的元素时，它什么也没做}，但仍将其绘制在其下方。 我还尝试过将z-index: 9设置为card[i + 1]之前将-1设置为card[i]，但这没有用。

我偶然发现了9的样式，但看起来它覆盖了所有其他CSS，这会导致我的情况下出现一长串文本（“如果我将所有CSS，因为它看起来像是一个丑陋的解决方案，因此可以工作”）

我没有主意...不允许使用jQuery或其他外部库。

编辑代码段：

setAttribute()

window.onload = function()
{
    var cards = document.querySelectorAll(".card");
    for (let i = 0; i < cards.length; i++)
    {
        cards[i].style.margin = "0 5px 0 5px";
        cards[i].style.opacity = "1";
    }
    setTimeout(1000);
    for (let i = 0; i < cards.length; i++)
    {
        cards[i].style.transition = ".4s";
    }
    for (let i = 0; i < cards.length; i++)
    {
        cards[i].onmouseover = function()
        {
            cards[i].style.zIndex = "9";
            cards[i].style.transform = "scale(1.1)";
        }
        cards[i].onmouseout = function()
        {
            cards[i].style.zIndex = "-1";
            cards[i].style.transform = "scale(1)";
        }
    }
}

.card
{
    background: rgb(70, 70, 70);
    width: 300px;
    padding-bottom: 10px;
    float: left;
    margin: 100px 5px 0 5px;
    opacity: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    transition: 1s;
    z-index: -1;
}
.card:hover
{
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card > img
{
    width: 300px;
}
.card-title
{
    margin-top: 5px;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
}
.card-text
{
    margin-top: 5px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

Answer 1

z-index仅适用于定位的元素。您正在使用float，这不是一回事。

z-index的全部要点是能够对元素进行分层。但是，当所有元素都在普通文档“流”中时，就不会发生分层（由于溢出而导致一项与另一项重叠）。为了能够进行真正的分层，您必须将需要分层的项目从普通文档流中剔除，这可以通过将CSS position指定为relative，{{1}来完成}或absolute。

来自MDN：

  

z-index CSS属性设置定位元素的z顺序   及其后代或弹性物品。重叠元素较大   z-index覆盖那些较小的索引。

将fixed添加到position:relative类中。

.card

window.onload = function()
{
    var cards = document.querySelectorAll(".card");
    for (let i = 0; i < cards.length; i++)
    {
        cards[i].style.margin = "0 5px 0 5px";
        cards[i].style.opacity = "1";
    }
    setTimeout(1000);
    for (let i = 0; i < cards.length; i++)
    {
        cards[i].style.transition = ".4s";
    }
    for (let i = 0; i < cards.length; i++)
    {
        cards[i].onmouseover = function()
        {
            cards[i].style.zIndex = "9";
            cards[i].style.transform = "scale(1.1)";
        }
        cards[i].onmouseout = function()
        {
            cards[i].style.zIndex = "-1";
            cards[i].style.transform = "scale(1)";
        }
    }
}

image { width:200px; } 
.card
{
    background: rgb(70, 70, 70);
    width: 200px;
    padding-bottom: 10px;
    float: left;
    margin: 100px 5px 0 5px;
    opacity: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    transition: 1s;
    z-index: -1;
    position:relative; /* z-index only works on positioned elements */
}
.card:hover
{
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card > img
{
    width: 300px;
}
.card-title
{
    margin-top: 5px;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
}
.card-text
{
    margin-top: 5px;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}