引导和CSS分层

我正在用bootstrap创建一个简单的HTML文件，由于某些原因，我似乎无法达到简单的分层效果

期望结果：

各层用z索引标记如下：
1.正文
2.半透明橙色条
3.内容：文本、徽标、图像

我使用的代码：

.container:第一个子容器{
背景色：白色；
位置：相对位置；
z指数：1；
}
#橙汁条{
高度：60px；
左：0；
右：0；
背景色：#F8EBD2；
位置：绝对位置；
z指数：2；
}
#内容{
位置：相对位置；
z指数：3；
}
#标志{
边缘顶部：30px；
宽度：100px；
}
#横幅{
宽度：533px；
}
.内联{
显示：内联块；
}
导航>ul>li>a{
颜色：#d86213；
}
.内联列表{
显示：内联块；
利润率：40像素10像素0；
}
.李先生{
浮动：对；
}

首先，您需要为所有不同的图层将“位置”属性设置为“属性：绝对”。 接下来，您需要将z索引值设置为更高的数字，以便在各种浏览器上更有效。尝试以下CSS修改

.container :first-child {
background-color: white;
position: absolute;
z-index: -100;}

#orange_bar {
height: 60px;
left: 0;
right: 0;
background-color: #F8EBD2;
position: absolute;
z-index: 0;}

#content {
position: absolute;
z-index: 100;}

---

这将有助于z索引的依赖项生效，即使div的堆叠放置在彼此内部。这应该会解决的。只需确保对z索引使用较大的整数，并在这种情况下使用position:absolute

因为我使用的是引导，所以整个布局都很混乱。我已经创建了一个JSFIDLE供您查看。不管怎样，我只是通过将

z-index

数字调大来解决这个问题。另外，您能解释一下为什么我需要将

z-index

数字调大吗？不是每个数字都代表一个层吗？是的，z索引只代表层。根据我的经验，在不同的浏览器类型之间，将它们进一步分开最有效。有时，将它们分开1或2个数字并没有足够的优先级来生效。是的，我理解。我希望能有一个更彻底的答案来理解这个东西是如何工作的，但我想，只要我得到了想要的结果，这其实并不重要。谢谢你，大卫！