Javascript z-index属性的行为与预期不符

我目前正在一个网站上工作，我需要心脏。我使用JavaScript和CSS创建红心：

function heart(x, y, pos, width, r) {
    var height = width + (width / 2 + 1);
    var heart = "position:" + pos + ";left:" + x + "px;top:" + y + "px;width:" + width + "px;height:" + height + "px;transform: rotate(" + r + "deg);-moz-transform: rotate(" + r + "deg);-webkit-transform: rotate(" + r + "deg);";
    var slices = "left:" + width + "px;width:" + width + "px;height:" + height + "px";
    $("body").append('<div class="heart" style="' + heart + '"><div class="slice" style="' + slices + '"></div><div class="slice2" style="' + slices + '"></div></div>');
}

然而，

z-index

并没有起到任何作用，正如您在我的示例中看到的那样

---

我甚至尝试将通用选择器（*）的

z-index

设置为0，同时将框的

z-index

更改为

10！重要的但这也不起作用。我对为什么会发生这种情况感到困惑，但我很确定这与充满活力的心脏有关。谢谢。
需要定位一个元素，以便
z-index
工作。看

在本例中，只需将
position:relative
添加到框中即可


不需要
！重要信息
。
需要定位一个元素，以便
z索引
工作。看

在本例中，只需将
position:relative
添加到框中即可


不需要
！重要信息
。
为了使用
z-index
，您的
不能是
位置：静态（这是默认值）

因此，为了显示
。欢迎您在心形上方添加
位置：相对

然后它应该可以工作。
为了使用
z-index
，您的
不能是
位置：静态（这是默认值）

因此，为了显示
。欢迎您在心形上方添加
位置：相对

然后它应该会工作。
您的z索引不工作，因为您的
。welcome
框有一个静态位置，所以您的

.welcome { z-index: 10 !important } 

声明没有任何效力。正因为如此，具有
z-index:0
的心脏仍将位于顶部

要解决此问题，请

a）将心脏设置为
z-index:-1

.heart { z-index: -1 }


b）设置
。欢迎将
的
位置设置为与初始静态位置不同的位置

.welcome { position: relative }


并丢失
！重要提示
，这是一种不好的做法。
您的z索引不起作用，因为您的
。欢迎
框具有静态位置，因此您的

.welcome { z-index: 10 !important } 

声明没有任何效力。正因为如此，具有
z-index:0
的心脏仍将位于顶部

要解决此问题，请

a）将心脏设置为
z-index:-1

.heart { z-index: -1 }


b）设置
。欢迎将
的
位置设置为与初始静态位置不同的位置

.welcome { position: relative }


并丢失
！重要提示
，这是一种糟糕的做法。
+1对于快速答案+z-index:-1
解决方案c：不需要绝对定位。相对定位可能更实用，在这种情况下就足够了。当然，这两种方法都是有效的，它只需要除了静态之外的一些东西。它需要相对的位置，而不是绝对的位置才能有效+1快速回答+1
z-index:-1
解决方案c：它不需要绝对的位置。相对定位可能更实用，在这种情况下就足够了。当然，无论是哪种工作，它都只需要除了静态之外的东西。它需要相对位置，而不是绝对位置才能有效