將陰影和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更改了Z-指數爲-1，希望這將幫助你

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

Answer 4

您對僞選擇:after分配box-shadow爲中心circle，你可以減少blur-radius特定元素如下所示，

box-shadow：offset-x | offset-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>