Z索引“堆疊”在創建陰影中

Question

我有以下要保留的HTML結構：

<div class="parent">
    <div class="shadow">Shadow here!</div>
</div>

CSS：

.parent {
    background: blue;
    z-index: 2;
    height: 200px;

}

.shadow {
    background: lightgrey;
    z-index: 0;
    opacity: 0.4;
    position: relative;
    top: 194px;
}

本質上，我希望div .shadow位於div .parent 。 如果您在下面的鏈接中查看渲染，則可以看到父級藍色背景的一部分穿過陰影。 相反，我希望父元素覆蓋該重疊的部分（堆疊在我想可以說的頂部）：

https://jsfiddle.net/9ya7kb67/

我該怎么辦？ 我在擺弄z-index，但這無濟於事。

Answer 1

這很簡單...給您的陰影z-index屬性像這樣的負值。 您還可以通過提供更高的價值來管理z-index。 也可以使用box-shadow屬性制作陰影。

.parent {
background: blue;
z-index: 2;
height: 200px;

}

.shadow {
background: lightgrey;
z-index: -1;
opacity: 0.4;
position: relative;
top: 194px;
}

Answer 2

您可以將框陰影與CSS3 https://css-tricks.com/snippets/css/css-box-shadow/

Answer 3

CSS box-shadow通過在元素后面創建陰影來工作。 因此，該元素已經在陰影之上。 在此，不需要z-index。

編碼：

.parent {
    background: blue;
    height: 200px;
    box-shadow: 0 8px 0 4px light grey;
}

不管是否包含z-index，都在做同樣的事情。

Answer 4

我不確定這是否是您要尋找的答案，但是您始終可以在parent box-shadow上使用CSS屬性box-shadow來獲得“陰影”效果。

在這里看到這個小提琴

您可以在線找到箱形陰影生成器，以使您的生活更輕松，例如此

Answer 5

.shadow需要負z-index值，因為z-index是從其父級繼承並相對顯示的。 z-index:0; 為它提供與父級相同的總體z-index ，因此，在子級是在父級之后聲明的，它就位於頂部。 這意味着通過將其設置為z-index:-1 ，可以將陰影放置在父級后面。

但是，如果您只是想要一個盒子陰影，我建議您實際使用CSS3盒子陰影而不是創建其他元素。

Answer 6

由於陰影位於父級的內部，因此無法使父級顯示在內部任何內容的頂部。 這是因為在CSS中，子元素將其父元素的z-index繼承為BASE z-index。 它可以有自己的z-index，但絕對不能小於其父級。

編輯：盒子陰影解決方案-https: //jsfiddle.net/9ya7kb67/3/

.parent {
   background: blue;
   z-index: 2;
   height: 200px;
   box-shadow: 0 8px 0px 4px lightgrey;    
}

EDIT2：對於無法將孩子置於父母以下的問題，我已得到糾正。 您可以實際執行此操作，但這是假設父級尚未設置z-index。 如果父母有一個z-index，則不可能將其放在孩子的上方。