Box-shadow不会出现在具有较低z-index的div上

Question

所以伙计们，我在这里有一个标题：

正如你所看到的，盒子阴影效果很好。但是，在内容<div>上添加背景颜色会产生以下结果：

视觉上，box-shadow涵盖了background-color。内容<div>的值z-index低于标题。如何让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将是最有可能的解决方案。