固定位置的Z索引在CodePen中不起作用

问题描述

我的页面上固定有垂直线，并且用户可以滚动浏览某些内容。内容的z-index值比固定的垂直线高，但是该行仍显示在内容的前面，如此CodePen所示。我希望内容超出界限，而不是界限之下。我该如何解决？

body {
  height: 200vh;
}

.line {
  height: 50vh;
  width: 1px;
  background: tomato;
  display: block;
  position: fixed;
  z-index: 1;
  right: 50%;
}

section {
  padding: 100px 0;
  z-index: 2;
  position: relative;
}

<span class="line"></span>
<section>some text</section>

解决方法

要将一项放置在另一项之上，两者都应位于相同的容器中。

 <div class="container">
<span class="line"></span>
<section>some text some text some textsome textsome textsome textsome textsome textsome text some textsome textsome text some text some text some text some textsome text some text some text</section>
</div>

    body {
  height: 200vh;
}

body {
  height: 200vh;
}
.container {
  display:block;
  position:absolute;
}

.line {
  height: 50vh;
  width: 1px;
  background: tomato;
  background: blue;
  
  width:15px;
  display: block;
  position: absolute;
  z-index: 1;
  right: 50%;
}

section {
  padding: 100px 0;
  z-index: 2;
  position: relative;
}

<div class="container">
<span class="line"></span>
<section>some text some text some textsome textsome textsome textsome textsome textsome text some textsome textsome text some text some text some text some textsome text some text some text</section>
</div>

.container {
  display:block;
  position:absolute;
}

.line {
  height: 50vh;
  width: 1px;
  background: tomato;
  background: blue;
  
  width:15px;
  display: block;
  position: absolute;
  z-index: 1;
  right: 50%;
}

section {
  padding: 100px 0;
  z-index: 2;
  position: relative;
}