@文本后面的关键帧动画

Question

我有四个在section元素内部旋转的动画div元素。div元素需要位于文本的下面(假设它有背景)，这样就不会有冲突的线条，所以我尝试做的是将background-color: #aeaeae; padding: 5px;添加到section p样式中，但是div元素仍然在文本的顶部旋转。

我还尝试向div和section p元素添加z-index，但似乎不起作用。我还尝试过将p元素包装在span标记中并更改显示样式。

​

@keyframes lines {
    0% {-webkit-transform: rotate(30deg);}
    100% {-webkit-transform: rotate(390deg);}
}

section {
    position: relative;
    padding: 50px;
    overflow: hidden;
}

section h1 {
    text-transform: uppercase;
    width: 150px;
    padding: 0 0 15px 0;
    border-bottom: 2px solid black;
    margin: 0;
}

section p {
    width: 50%;
    line-height: 1.5em;
    background-color: #aeaeae;
    padding: 5px;
}

.section-1 {
    background-color: #aeaeae;
    overflow: hidden;
}

.line {
    position: absolute;
    background-color: black;
    width: 2000px;
    height: 2px;
}
.line-1 {
    right: 521px;
    top: 33px; 
    animation: lines linear 100s infinite;
}
.line-2 {
    left: 9;
    top: 551px; 
    animation: lines linear 140s infinite;
}
.line-3 {
    left: -212px;
    top: 29px; 
    animation: lines reverse 120s infinite;
}
.line-4 {
    left: -400px;
    top: 20px; 
    animation: lines reverse 80s infinite;
}

<section class="section-1">
  <div class="line line-1"></div>
  <div class="line line-2"></div>
  <div class="line line-3"></div>
  <div class="line line-4"></div>
  <h1>About</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare malesuada risus. Pellentesque vel neque a quam vehicula egestas. Cras vestibulum nisi lorem, nec dictum nisi luctus eget. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    Nunc maximus, velit at blandit pulvinar, est nisl sodales leo, eu scelerisque ante mauris sed purus.</p>
  <p>Maecenas blandit nec felis vel tincidunt. Curabitur id nibh dui. Ut suscipit interdum sem, sed auctor enim dignissim et. Nam luctus augue sit amet ullamcorper tincidunt. Donec posuere condimentum enim in dignissim. Ut purus ante, vehicula in luctus
    non, vestibulum non ipsum. Etiam semper urna sed nunc ornare.</p>
</section>

​

Answer 1

感谢你@Pangloss的回答：

"z-index仅适用于定位框(即，具有除静态之外的任何位置的框)“，请参阅MDN规范”