z-index Css出現問題

Question

在css上嘗試使一個盒子在另一個盒子下面。 我被教導要使用z-index； 但是，當我給一個CSS代碼一個不同的z索引時，什么也沒有發生。 一切都正確放置，但是沒有將一個放置在另一個下面。 我的z-index有什么問題？ 到目前為止，這是我的CSS。 box1應該顯示在檢查清單和邊框上方

body
{
 background: #afc2df;
 }
#body
{
 bottom: 0px;
 left: 0px;
 position: absolute;
 right: 0px;
 top: 0px;
}

#box1
{
 border: 250px;
 border-style: groove;
 border-radius:35px;
 margin-left: 85px;
 position fixed;
 margin-top: 65px;
 width: 17%;
 z-index: 3;

}

#table1
{
 position fixed;
 height: 400px;
 background: #0ff;
 margin-left: 118px;
 bottom: 90px;
}
#border
{
 position: fixed;
 border-style: solid;
 width: 200px;
 height: 150px;
 padding: 2px;
 background: #708090;
 margin-left: 790px;
 margin-top: -560px;
 border-radius:35px;    
 z-index: 2;

}
#checklist{
position: fixed;
border-style: solid;
width: 220px;
height: 155px;
padding: 2px;
background: #708090;
margin-left: 790px;
margin-top: -80px;
z-index: 1;
}




.link {text-decoration: none;
}

Answer 1

您的問題可能在於嵌套元素。

父元素的z-index比嵌套元素之一更重要，因此，如果父元素在某些元素下面，它的子元素永遠不會在該元素的前面。

同樣，z索引越大，元素在前面的位置就越多。 #checklist是z-index 1，表示它在#border和＃box1之后

Answer 2

您在box1和table1上固定的位置上缺少一些“：”

position fixed;

應該是？

position: fixed;

Answer 3

如果EricGS指出，問題是沒有問題的（缺少的: ），那么我同意Hurda。 您的問題很可能在於嵌套元素。 在這種情況下，使用!important作為EricGS建議將不起作用。

元素有一種叫做堆棧順序的東西。

我在這里創建了一個jsfiddle，供您查看實際問題（並且!important無法正常工作）。