絶対配置された要素に影とz-インデックスを適用する

Question

ナビゲーションバーではバンプを達成しようとしていますが、ナビゲーションバーにはボックスシャドウがあるはずです...しかし、 ...どういうわけか、ナビゲーションバーの後ろにバンプを置くことはできません。これは既知の問題ですか、何か不足していますか？どうもありがとう。

body { 
 
    background: beige; 
 
} 
 

 
.c-header { 
 
    background: white; 
 
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.8); 
 
    height: 60px; 
 
    position: fixed; 
 
    width: 100%; 
 
    z-index: 9999; 
 
} 
 

 
.c-site-nav { 
 
    align-content: center; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.c-site-nav ul { 
 
    margin-left: 0; 
 
} 
 
.c-site-nav__item { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    list-style: none; 
 
    width: 40%; 
 
} 
 
.c-site-nav__item a { 
 
    font-size: 20px; 
 
    color: grey; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
} 
 

 
.c-logo { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 15px; 
 
    width: 45px; 
 
    z-index: 1; 
 
} 
 
.c-logo::after { 
 
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.8); 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    background: white; 
 
    border-radius: 50%; 
 
    content: ''; 
 
    height: 60px; 
 
    position: absolute; 
 
    width: 60px; 
 
    z-index: -100; 
 
}

<header class="c-header"> 
 
    <div class="c-logo"> 
 
    </div> 
 
    <nav class="c-site-nav"> 
 
    <ul class="c-site-nav__item"> 
 
     <li><a href="/">asd</a></li> 
 
     <li><a href="/ueber_uns">asd</a></li> 
 
     <li><a href="/">asd</a></li> 
 
    </ul> 
 
    <ul class="c-site-nav__item"> 
 
     <li><a href="/">asd</a></li> 
 
     <li><a href="/">asd</a></li> 
 
     <li><a href="tel:+49234234234">34234234</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 1

は、私はちょうどそれを達成するための最も簡単な方法を実現し、取り除くためにバンプを作成した擬似の上に別の擬似要素を配置するだろう（又は隠蔽）バンプ

body { 
 
    background: beige; 
 
    margin: 0; 
 
} 
 

 
.c-header { 
 
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12); 
 
    background: white; 
 
    height: 45px; 
 
    width: 100%; 
 
    z-index: 9999; 
 
} 
 

 
.c-site-nav { 
 
    align-content: center; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.c-site-nav ul { 
 
    margin-left: 0; 
 
} 
 
.c-site-nav__item { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    list-style: none; 
 
    width: 40%; 
 
} 
 
.c-site-nav__item a { 
 
    font-size: 20px; 
 
    color: grey; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
} 
 

 
.c-logo { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 10px; 
 
    width: 45px; 
 
    z-index: 1; 
 
} 
 
.c-logo::after { 
 
    box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12); 
 
    background: white; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    content: ''; 
 
    height: 45px; 
 
    position: absolute; 
 
    width: 60px; 
 
    z-index: -1; 
 
} 
 

 
.c-logo::before { 
 
    background: white; 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    content: ''; 
 
    top: -10px; 
 
    height: 45px; 
 
    position: absolute; 
 
    width: 80px; 
 
    z-index: 1; 
 
}

<header class="c-header"> 
 
    <div class="c-logo"> 
 
</div> 
 
    <nav class="c-site-nav"> 
 
    <ul class="c-site-nav__item"> 
 
     <li><a href="/">item</a></li> 
 
     <li><a href="/">item</a></li> 
 
     <li><a href="/">item</a></li> 
 
    </ul> 
 
    <ul class="c-site-nav__item"> 
 
     <li><a href="/">item</a></li> 
 
     <li><a href="/">item</a></li> 
 
     <li><a href="/">item</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>

の影

Answer 2

これは、予想される結果であるかどうかは知りませんが、私は、これはヘッダ要素の外

<div class="c-logo"> 

を置くことによって行われ得ることができました。

body { 
 
    background: beige; 
 
} 
 

 
.c-header { 
 
    background: white; 
 
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.8); 
 
    height: 60px; 
 
    position: fixed; 
 
    width: 100%; 
 
    z-index: 9999; 
 
} 
 

 
.c-site-nav { 
 
    align-content: center; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.c-site-nav ul { 
 
    margin-left: 0; 
 
} 
 
.c-site-nav__item { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    list-style: none; 
 
    width: 40%; 
 
} 
 
.c-site-nav__item a { 
 
    font-size: 20px; 
 
    color: grey; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
} 
 

 
.c-logo { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 15px; 
 
    width: 45px; 
 
    z-index: 1; 
 
} 
 
.c-logo::after { 
 
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.8); 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    background: white; 
 
    border-radius: 50%; 
 
    content: ''; 
 
    height: 60px; 
 
    position: absolute; 
 
    width: 60px; 
 
    z-index: -100; 
 
}

<header class="c-header"> 
 
    </div> 
 
    <nav class="c-site-nav"> 
 
    <ul class="c-site-nav__item"> 
 
     <li><a href="/">asd</a></li> 
 
     <li><a href="/ueber_uns">asd</a></li> 
 
     <li><a href="/">asd</a></li> 
 
    </ul> 
 
    <ul class="c-site-nav__item"> 
 
     <li><a href="/">asd</a></li> 
 
     <li><a href="/">asd</a></li> 
 
     <li><a href="tel:+49234234234">34234234</a></li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 
    <div class="c-logo">

Answer 3

変更] C-ロゴ "のスタイル。 1から-1に、これはあなたが中央circleのための疑似セレクタ:afterにbox-shadowが割り当てられています

`.c-logo { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 15px; 
 
    width: 45px; 
 
    z-index: -1; 
 
}`

Answer 4

、あなたがその特定の要素にblur-radiusを減らすことができる役立つことを願っていますZ-インデックスのみを変更以下のように、

box-shadow：offset-x |オフセット-y |ぼかし半径|カラー混乱させて申し訳ありません

body { 
 
    background: beige; 
 
} 
 

 
.c-header { 
 
    background: white; 
 
    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.8); 
 
    height: 60px; 
 
    position: fixed; 
 
    width: 100%; 
 
    z-index: 9999; 
 
} 
 

 
.c-site-nav { 
 
    align-content: center; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.c-site-nav ul { 
 
    margin-left: 0; 
 
} 
 
.c-site-nav__item { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    list-style: none; 
 
    width: 40%; 
 
} 
 
.c-site-nav__item a { 
 
    font-size: 20px; 
 
    color: grey; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
} 
 

 
.c-logo { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 15px; 
 
    width: 45px; 
 
    z-index: 1; 
 
} 
 
.c-logo::after { 
 
    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.8); 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
    background: white; 
 
    border-radius: 50%; 
 
    content: ''; 
 
    height: 60px; 
 
    position: absolute; 
 
    width: 60px; 
 
    z-index: -100; 
 
}

<header class="c-header"> 
 
    <div class="c-logo"> 
 
    </div> 
 
    <nav class="c-site-nav"> 
 
    <ul class="c-site-nav__item"> 
 
     <li><a href="/">asd</a></li> 
 
     <li><a href="/ueber_uns">asd</a></li> 
 
     <li><a href="/">asd</a></li> 
 
    </ul> 
 
    <ul class="c-site-nav__item"> 
 
     <li><a href="/">asd</a></li> 
 
     <li><a href="/">asd</a></li> 
 
     <li><a href="tel:+49234234234">34234234</a></li> 
 
    </ul> 
 
    </nav> 
 
</header>