CSS 阴影覆盖 div / 内容答案

【问题标题】：CSS Shadow laying over div / contentCSS 阴影覆盖 div / 内容
【发布时间】：2014-08-05 16:31:29
【问题描述】：

我希望阴影位于该部分的后面。我已经尝试了所有方法，但仍然找不到解决方法。

HTML

<section id="features" class="shadow">
    <div class="container">Content</div>
</section>

CSS

section {
    text-align:center;
    position:relative;
    z-index:20
}

#features {
    padding:4rem 0;
    background:#018CB8
}

.container {
    color:#FFF;
    margin:0 auto;
    max-width:55rem;
    width:90%
}

.shadow:after {
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 40px rgba(0,0,0,0.8);
    box-shadow:0 0 40px rgba(0,0,0,0.8);
    bottom:0;
    left:10%;
    right:10%;
    width:80%;
    height:50%;
    -moz-border-radius:100%;
    border-radius:100%
}

【问题讨论】：

标签： html css shadow

【解决方案1】：

我已经简化了你的例子：

目前只有z-index: -1 有效，这让我很困惑。

Have a fiddle!

HTML

<div class="shadow">Content</div>

CSS

.shadow {
    padding: 4rem 0;
    background: #018CB8;
    color:#FFF;
    margin: 0 auto;
    max-width: 55rem;
    width: 90%;
    position: relative;
    text-align: center;
}
.shadow:after {
    content:"";
    position:absolute;
    box-shadow:0 0 40px rgba(0, 0, 0, 0.8);
    bottom:0px;
    left:10%;
    right:10%;
    width:80%;
    height:50%;
    border-radius:100%;
    z-index: -1;
}

【讨论】：

是的，当您不使用 z-indexes 时，这将是一种解决方案，但是如果您想在另一个部分 / div 上有阴影，以给人一种 div 在另一个之上的感觉那些...解决方案是什么？ Have look here to see what I'm talking about - jsfiddle
使用当前方法，您需要将 .shadow 与您想要重叠的 div 包裹起来，并给它任何 z-index 值和 position: relative;。 Like in this example

【解决方案2】：

你在这里：jsfiddle。

我添加了一个margin-bottom: 40px 来使阴影居中。这是你要找的吗？

【讨论】：

对不起，不，看看第一个答案。