Question

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

Answer 1

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

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

所以，简单地说，你要定位.header并给它一个高于z-index的{{1}}。由于.topnav没有z-index，因此z-index为1适用于.topnav。

在此实验并阅读更多内容：https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Answer 2

添加

z-index: 1000;

到标题类然后

z-index: 900;

到topnav类

z-index基本上是它看起来接近或远的指数。越接近于零，你会得到'更平坦'它会出现，我相信1000是另一个方向的最高点。通常我设置我的导航栏或任何顶级组件我必须z-index 1000然后从那里下来。

前景中缺少CSS Box-shadow

2 个答案: