@keyframesアニメーションの背景にテキスト

Question

section要素内で回転しているdivの要素がアニメーション化されています。 divの要素は、背景があると仮定してテキストの下に移動する必要があります。したがって、私がしようとしたことはsection pスタイルにbackground-color: #aeaeae; padding: 5px;を追加することですが、div要素は依然としてテキスト。

z-indexをdivとsection pの両方の要素に追加しようとしましたが、動作していないようです。また、spanタグにp要素をラップし、表示スタイルを変更してみました。

@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インデックスはのみ動作します "（つまり、静的以外の任意の位置を有するものです）"、 MDN仕様を参照してください。