前台缺少 CSS 框阴影答案

【问题标题】：CSS Box-shadow Missing on Foreground前台缺少 CSS 框阴影
【发布时间】：2018-08-22 03:58:54
【问题描述】：

我无法让标题类中的 CSS box-shadow 与其下方的导航栏重叠。阴影出现在标题后面，但在底部不可见。完整的示例是一个三列页面布局，带有页眉、导航栏和正文内容页脚。 Codepen

/* Header/Blog Title */
.header {
    padding: 30px;
    text-align: center;
    background: white;
    box-shadow: 1px 18px 5px red;
}

.header h1 {
    font-size: 50px;
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #333;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

<body>

<div class="header">
  <h1>My Website</h1>
  <p>Resize the browser window to see the effect.</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#" style="float:right">Link</a>
</div>
</body>

【问题讨论】：

这是正常行为，因为默认情况下，元素将位于其先前兄弟的顶部。在标题和导航元素上使用 position: relative;，并相应地设置 z-index（在标题上高于菜单）以覆盖默认行为。

标签： html css

【解决方案1】：

添加

z-index: 1000;

到标题类，然后

z-index: 900;

到topnav类

z-index 本质上是它在您看来有多近或多远的索引。越接近零，它就会出现“更平坦”，我相信 1000 是另一个方向的最高值。通常我将导航栏或我必须的任何顶级组件设置为 z-index 1000，然后从那里向下。

【讨论】：

【解决方案2】：

/* Header/Blog Title */
.header {
    padding: 30px;
    text-align: center;
    background: white;
    box-shadow: 1px 18px 5px red;
    position: relative;
    z-index: 2;
}

.header h1 {
    font-size: 50px;
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #333;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

<body>

<div class="header">
  <h1>My Website</h1>
  <p>Resize the browser window to see the effect.</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#" style="float:right">Link</a>
</div>
</body>

您只需添加position: relative（或者您可以使用absolute 或fixed，但在这种情况下，它会破坏布局。z-index 仅适用于“定位”（即具有任何位置的除了静态）元素）。

所以，简单地说，你定位你 .header 并给它一个高于 .topnav 的 z-index。由于 .topnav 没有 z-index，所以 z-index 为 1 对 .header 有效。

在这里进行实验并阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

【讨论】：