2016-05-04 7 views
1

私はヘッダをオーバーラップさせるためにh1.logoを取得しようとしています:after。Z-Indexは動作しません: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> 

答えて

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です

+0

これは機能します。ありがとうございました!! –

関連する問題