z-index屬性的行爲並不像預期的那樣

我目前正在一個我需要心的網站上工作。我創建一個使用JavaScript和CSS的心：z-index屬性的行爲並不像預期的那樣

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;，但這也不起作用。我對這種情況發生的原因感到困惑，但我很確定它與動態心臟有關。謝謝。

來源

2014-03-14 Shawn31313

爲了使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無論是。

來源

2014-03-14 01:30:48

爲了使用z-index，你<div> s不能是position: static;（這是默認）

因此，爲了顯示你需要添加position:relative;

那麼就應該心中上述.welcome工作。

來源

2014-03-14 01:32:06 Pinki

你的z-index不工作，因爲你的.welcome箱具有靜態定位，所以你

.welcome { z-index: 10 !important }

聲明沒有任何效果。正因爲如此，擁有z-index:0的人的心依然處於頂峯。

爲了解決這個問題，無論是

一）設置心中z-index: -1

.heart { z-index: -1 }

jsFiddle

B）集.welcome的position不同的東西比它的初始靜態位置。

.welcome { position: relative }

jsFiddle

而失去!important，這是不好的做法。

來源

2014-03-14 01:35:34

+1快速回答+ z-index：-1'解決方案c： – Shawn31313

它不需要*被絕對定位。相對定位可能更實際，在這種情況下就足夠了。當然，無論是工作，它只是需要一些'靜態'旁邊的東西.. –

它需要位置相對，不是絕對有效 – Pinki

z-index屬性的行爲並不像預期的那樣

回答

相關問題