Z-Indexは動作しません：after

Question

私はヘッダをオーバーラップさせるためにh1.logoを取得しようとしています：after。

私は推奨されているように、正のz-インデックスで体に相対的な位置を追加しようとしましたが、私はここではありません。

とにかくZインデックスを作成する方法はありますか？

この

は、私のコードのCSS

body { 
    position: relative; 
    z-index: 100; 
} 
header { 
    background: #184677; 
    width: 100%; 
    height: 55px; 
    position: relative; 
    } 
header:after { 
    content:""; 
    display:block; 
    position:absolute; 
    z-index:0; 
    left:0px; 
    right:0px; 
    bottom:-8px; border-bottom:4px solid #184677; 
    } 
    a { 
    text-decoration: none; 
    color: #eee; 
    } 
    h1.logo { 
    display: inline; 
    float: left; 
    margin: 0 0 0 13%; 
    padding: 15px; 
    background: green; 
    border-radius: 0 0 3px 3px; 
    z-index: 100; 
    } 

であり、これは

<header> 
    <h1 class="logo"><a href="#">Test</a></h1> 
</header> 

Answer 1

は、単にあなたのheader:after

body { 
 
    position: relative; 
 
    z-index: 100; 
 
} 
 
header { 
 
    background: #184677; 
 
    width: 100%; 
 
    height: 55px; 
 
    position: relative; 
 
} 
 
header:after { 
 
    content:""; 
 
    display:block; 
 
    position:absolute; 
 
    z-index:-1;    /* -1 instead of 0 */ 
 
    left:0px; 
 
    right:0px; 
 
    bottom:-8px; border-bottom:4px solid #184677; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: #eee; 
 
} 
 
h1.logo { 
 
    display: inline; 
 
    float: left; 
 
    margin: 0 0 0 13%; 
 
    padding: 15px; 
 
    background: green; 
 
    border-radius: 0 0 3px 3px; 
 
    z-index: 100; 
 
}

<header> 
 
    <h1 class="logo"><a href="#">Test</a></h1> 
 
</header>

に z-index: -1;を使用してhtmlです