如何让 box-shadow 出现在 div 上方? [英] How can I make box-shadow appear above a div?

问题描述

这里是我想要完成的一个例子.

上方 div 的 box-shadow 不会出现在其下方 div 的顶部.据我所知，我需要设置 z-index 以便它会出现在顶部，并且只适用于具有 position: relative; 的元素，但它仍然没有出现.

我做错了什么?

#top {宽度:100%；高度:100px；框阴影:3px 3px 3px #333;背景颜色:蓝色；}#中间 {宽度:100%；高度:200px；z-索引:0；位置:相对；背景颜色:橙色；}#innerMiddle {宽度:200px；高度:200px；边距:0 自动；背景颜色:绿色；}

<div id="中间"><div id="innerMiddle">

解决方案

它是 #top 和它的 box-shadow 你想要出现在顶部，所以给它position:relative 而不是将 position:relative 赋予 #middle.不需要 z-index: 0.

http://jsfiddle.net/thirtydot/QqME6/1/

Here is an example of what I'm trying to accomplish.

The box-shadow from the upper div won't appear on top of the div below it. From what I understand, I need to set the z-index so it will appear on top and that only works on elements with position: relative; but it's still not appearing.

What am I doing wrong?

#top {
    width: 100%;
    height: 100px;
    box-shadow: 3px 3px 3px #333;
    background-color: blue;
}

#middle {
    width: 100%;
    height: 200px;
    z-index: 0;
    position: relative;
    background-color: orange;
}

#innerMiddle {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background-color: green;
}

<div id="top">
</div>

<div id="middle">
    <div id="innerMiddle">
    </div>
</div>

解决方案

It's #top and its box-shadow that you want to appear on top, so give that position: relative instead of giving position: relative to #middle. There's no need for z-index: 0.

http://jsfiddle.net/thirtydot/QqME6/1/

这篇关于如何让 box-shadow 出现在 div 上方?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！