css - 是否有我从未听说过的 z 索引和边框的特殊性？

Question

我正在尝试使用边距和 z-index(es) 在某些文本的任一侧创建一条线，但 z-index 似乎并没有像我预期的那样对元素进行排序。最终，我想将文本背景设置为白色，并且只在两边显示一条线。我可以让线在框后面，但不能在框和文本之间。任何人都可以为我阐明一些光吗？我快把头发扯掉了，我没有多少。

.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;    
}

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

<div class="thebox">
    <h1>This is my title text.  I'm hoping that it should end up with a line either side, but not overwriting it.</h1>
    <div class="theline"> </div>
</div>

Answer 1

我删除了位置属性并切换了顺序，现在应该没问题了:

http://jsfiddle.net/4cw9ns8q/2/

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