html - 框阴影未出现在具有较低 z-index 的 div 上

Question

伙计们，我这里有一个标题:

如您所见，box-shadow 效果很好。但是，在内容上放置背景颜色 <div>产生这个:

在视觉上，box-shadow被 background-color 覆盖.内容<div>有较低的z-index值比 header 虽然。我怎样才能制作 box-shadow出现在 <div>使内容看起来像是在标题下？

如果这有帮助，这里是两个标记的 CSS:

header{ /* the header, obviously */
            background: #fee;
                height: 60px;
               padding: 40px 20px 0px 20px;
         border-bottom: 5px solid #f53301;
    -webkit-box-shadow: 0 12px 16px -6px gray;
       -moz-box-shadow: 0 12px 16px -6px gray;
            box-shadow: 0 12px 16px -6px gray;
         border-radius: 20px 20px 0px 0px;
               z-index: 9999;
}

#content-inside { /* the content */
    padding:20px;
    z-index:1; /* changed this to -1 but it still didn't work */
    background:white;
    border:1px solid black;
}

我希望有人能帮我解决这个问题。干杯!

Answer 1

z-index 仅适用于已设置位置的元素(即不是默认静态位置)。尝试 position:relative 将是这里最可能的解决方案。