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属性来制作阴影。

rake db:seed users=yes

Answer 2

您可以将框阴影与CSS3 https://css-tricks.com/snippets/css/css-box-shadow/

一起使用

Answer 3

CSS box-shadow works by creating a shadow behind an element. Thus, the element is already on top of the shadow. Here, z-index is not required.

the code:

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

is doing the same thing regardless if you include z-index or not.

Answer 4

我不确定这是否是您正在寻找的答案，但您始终可以使用box-shadow上的CSS属性parent来获得“阴影”＆＃39 ;效果。

请参阅this fiddle here

您可以在线找到盒子阴影生成器，让您的生活更轻松，例如this one

Answer 5

.shadow需要一个负z-index值，因为z-index是从它的父级继承并且相对显示的。 z-index:0;赋予它与父级具有相同的总体z-index，并且因为子级在父级之后被声明，因此它位于顶部。这意味着通过将其设置为z-index:-1，您将阴影放在父级后面。

但是，如果您只想要一个盒子阴影，我建议您实际使用CSS3 Box Shadows而不是创建其他元素。

Answer 6

因为阴影是父级的INSIDE，所以无法使父级显示在内部的任何内容之上。这是因为在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，那么就不可能把它放在孩子身上。

Z-index＆＃34;堆叠＆＃34;在创造一个阴影

6 个答案: