Question

我目前正在一个我需要心灵的网站上工作。我用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>');
}

我目前正尝试使用以下方法将大心脏放在一个盒子下面

heart(282, 69, "absolute", 230, 0);

但是，z-index没有做任何事情，您可以在我的JSFiddle示例中看到。

我甚至尝试将通用选择器（*）的z-index设置为0，同时将框的z-index更改为10 !important;但是没有工作要么。我很困惑为什么会这样，但我很确定它与动态的心脏有关。谢谢。

Answer 1

需要定位元素才能使z-index起作用。请参阅visual formatting modal。

在这种情况下，您只需在框中添加position:relative即可。

UPDATED EXAMPLE HERE

.welcome {
    z-index:10;
    position: relative;
    background: #fff;
    margin: 0 auto;
    width: 200px;
    padding: 100px;
    text-align: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
}

也不需要!important。

Answer 2

为了使用z-index，您的<div>不能是position: static;（这是默认设置）

因此，为了在心中显示.welcome，您需要添加position:relative;

然后它应该工作。

Answer 3

您的z-index无效，因为您的.welcome框具有静态定位，因此您的

.welcome { z-index: 10 !important }

声明没有任何效果。因此，拥有z-index:0的心脏仍将位于最前面。

要解决此问题，

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

.heart { z-index: -1 }

jsFiddle

b）将.welcome＆＃39; position设置为与其初始静态位置不同的内容。

.welcome { position: relative }

jsFiddle

并且失去了!important，这是一种不好的做法。

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

3 个答案: