0

处理 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;
}
4

3 回答 3

1

您的问题可能在于嵌套元素。

父元素 z-index 比嵌套元素更重要，因此如果父元素低于某个元素，则它的子元素永远不会位于该元素的前面。

z-index 越大，元素越靠前。#checklist 是 z-index 1 这意味着它在 #border 和 #box1 后面

于 2013-09-26T19:30:33.793 回答
0

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

position fixed;

应该是？

position: fixed;

于 2013-09-26T19:31:37.940 回答
0

如果 EricGS 指出的问题不是问题（缺失:），那么我同意 Hurda。您的问题很可能在于嵌套元素。在这种情况下，!important按照 EricGS 的建议使用是行不通的。

元素有一种叫做stack(ing) order的东西。

我在这里创建了一个 jsfiddle 供您查看问题的实际效果（并且!important不起作用）。

于 2013-09-26T21:02:14.817 回答