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-index越大，元素前面的越多。 #checklist是z-index 1，这意味着它落后于#border和＃box1

Answer 2

在第1栏和第1栏

上的位置上有一些“：”

position fixed;

应该是？

position: fixed;

Answer 3

如果EricGS指出的问题不是问题（缺少:），那么我同意Hurda。您的问题很可能与嵌套元素有关。在这种情况下，使用!important作为EricGS建议不起作用。

元素有一个名为stack(ing) order的东西。

I have created a jsfiddle here for you to see the issue in action (and !important not working).

z-index Css问题

3 个答案: