html - z-index Css のトラブル

Question

あるボックスを別のボックスの下に置こうとしてCSSに取り組んでいます。z-index を使用するように教えられました。ただし、1 つの 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

EricGS が指摘した問題が問題ではない場合 (欠落している:)、私は Hurda に同意します。あなたの問題は、ネストされた要素にある可能性があります。その場合、!importantEricGS の提案どおりに使用しても機能しません。

要素のスタック(ing)順序と呼ばれるものがあります。

ここでjsfiddleを作成して、問題が実際に発生していることを確認してください（動作して!importantいません）。

Answer 2

box1 と table1 で修正された位置に「:」がいくつかありません

position fixed;

する必要がありますか？

position: fixed;