Css z索引和边框是否有I'；你从没听说过吗？

我试图使用边距和z-index（es）在某些文本的任一侧创建一行，但是z-index似乎不像我预期的那样对元素进行排序。最后，我想将文本背景设置为白色，并用一条线显示两侧。我可以让线在框后面，但不能在框和文本之间。谁能给我点启示吗？我把头发扯得乱七八糟，我的头发不多了。

.thebox{
背景色：白色；
颜色：黑色；
填充顶部：30px；
填充底部：30px；
z指数：1；
}
.盒子h1{
文本对齐：居中；
背景色：#666；
右边距：100px；
左边距：100px；
字体大小：16px；
z指数：10；
}
.盒子.这条线{
边框顶部：纯色1px黑色；
宽度：100%；
高度：1px；
位置：绝对位置；
最高：19%；
z指数：5；
}

这是我的标题文本。我希望它的两端都有一行，但不要覆盖它。

我删除了位置属性和切换顺序，现在应该可以了：

---

尝试以下方法。您需要在各个元素上设置

position:relative

，以便

z-index

产生效果。否则，你就走上了正确的道路

.thebox{
背景颜色：黄色；
颜色：黑色；
填充顶部：30px；
填充底部：30px；
位置：相对位置；
}
.盒子h1{
文本对齐：居中；
背景色：#666；
右边距：100px；
左边距：100px；
字体大小：16px；
位置：相对位置；
z指数：10；
}
.盒子.这条线{
边框顶部：纯色1px黑色；
宽度：100%；
高度：1px；
位置：绝对位置；
最高：50%；
z指数：5；
}

这是我的标题文本。我希望它能以一行结尾
任一侧，但不覆盖它。

您还需要将绝对位置添加到h1：

.thebox {
background-color: white;
color: black;
padding-top: 30px;
padding-bottom: 30px;
z-index: 1;

}

}

}

默认位置值是静态的，index-z仅对具有非静态位置的元素有效

.thebox {
background-color: white;
color: black;
padding-top: 30px;
padding-bottom: 30px;
z-index: 1;

.thebox h1 {
text-align: center;
background-color: #666;
margin-right: 100px;
margin-left: 100px;
font-size: 16px;
z-index: 10; 
display:inline-block;
position:absolute;

.thebox .theline {
border-top: solid 1px black;
width: 100%;
height: 1px;
position: absolute;
top: 39%;
z-index: 5;