文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >当添加新的div标记时，框阴影正在消失。

问当添加新的div标记时，框阴影正在消失。
EN

Stack Overflow用户
提问于 2021-06-30 18:16:24
回答 1查看 188关注 0票数 1

我是一个初学者，我目前正在学习HTML和CSS。现在我正在尝试创建一个网页。在我的html中，我在box shadow标记中添加了一个header。但是，当我在div标记旁边添加一个header标记时，框阴影正在消失。为什么会发生这种情况？

​

代码语言：javascript
复制
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: 'Source Sans Pro', sans-serif;
  text-decoration: none;
  list-style: none;
}

header {
  height: 101px;
  -webkit-box-shadow: 0 0 5px #000;
          box-shadow: 0 0 5px #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 0 40px;
}

header .logo {
  margin-right: 4rem;
}

header .logo img {
  width: 51px;
}

header .nav-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
  font-weight: 700;
}

header .nav-bar a {
  color: #000;
}

header .nav-bar a:hover {
  color: #008248;
}

header .nav-bar .nav-1 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  letter-spacing: 0.1em;
}

header .nav-bar .nav-1 ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-transform: uppercase;
}

header .nav-bar .nav-1 ul li {
  margin-right: 24px;
}

header .nav-bar .nav-2 ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

header .nav-bar .nav-2 ul li {
  margin-left: 24px;
}

header .nav-bar .nav-2 ul .btn, header .nav-bar .nav-2 ul .btn-black {
  padding: 7px 16px;
  border: 1px solid #000;
  font-size: 14px;
  border-radius: 30px;
}

header .nav-bar .nav-2 ul .btn:hover, header .nav-bar .nav-2 ul .btn-black:hover {
  background-color: #F0F0F0;
}

header .nav-bar .nav-2 ul .btn-black {
  background-color: #000;
  color: #fff;
}

header .nav-bar .nav-2 ul .btn-black:hover {
  background-color: #4C4C4C;
}

.notice {
  background-color: #D8E8E3;
  padding: 2rem 0;
  margin-bottom: 2rem;
}

.notice p {
  width: 55%;
  letter-spacing: 0.05em;
  font-size: 19.5px;
  font-weight: 600;
  line-height: 1.75;
  text-align: center;
  margin: auto;
}

.notice p a {
  color: #000;
  text-decoration: underline;
}

.notice p a:hover {
  text-decoration: none;
}
/*# sourceMappingURL=styles.css.map */
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./images/starbucks-favicon.png">
    <!-- Google Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;900&display=swap" rel="stylesheet">
    <!-- FontAwesome CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
    <title>Starbucks Coffee Company</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <header>
        <div class="logo">
            <img src="./images/starbucks-logo.png" alt="starbucks-logo">
        </div>
        <div class="nav-bar">
            <nav class="nav-1">
                <ul>
                    <li><a href="#">Menu</a></li>
                    <li><a href="#">Rewards</a></li>
                    <li><a href="#">Gift Cards</a></li>
                </ul>
            </nav>
            <nav class="nav-2">
                <ul>
                    <li><a href="#"><i class="fas fa-map-marker-alt"></i> Find a store</a></li>
                    <li><a class="btn" href="#">Sign in</a></li>
                    <li><a class="btn-black" href="#">Join now</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="notice">
        <p>Facial coverings are now optional in our stores for our fully vaccinated customers, following CDC guidance, except where local regulations require it by law. <a href="#">Learn more</a></p>
    </div>
</body>
</html>

​

为什么会发生这种情况？我怎样才能解决这个问题？

html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-06-30 18:25:05

问题是新的<div>正在覆盖<header>上的框影。我想出的解决方案是给你的<header>一个相对定位和一个正Z-指数，在z轴中“垂直地”叠加它：

​

代码语言：javascript
复制
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: 'Source Sans Pro', sans-serif;
  text-decoration: none;
  list-style: none;
}

header {
  height: 101px;
  -webkit-box-shadow: 0 0 5px #000;
          box-shadow: 0 0 5px #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 0 40px;
  position: relative; /* added position relative and z-index */
  z-index: 2;
}

header .logo {
  margin-right: 4rem;
}

header .logo img {
  width: 51px;
}

header .nav-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
  font-weight: 700;
}

header .nav-bar a {
  color: #000;
}

header .nav-bar a:hover {
  color: #008248;
}

header .nav-bar .nav-1 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  letter-spacing: 0.1em;
}

header .nav-bar .nav-1 ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-transform: uppercase;
}

header .nav-bar .nav-1 ul li {
  margin-right: 24px;
}

header .nav-bar .nav-2 ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

header .nav-bar .nav-2 ul li {
  margin-left: 24px;
}

header .nav-bar .nav-2 ul .btn, header .nav-bar .nav-2 ul .btn-black {
  padding: 7px 16px;
  border: 1px solid #000;
  font-size: 14px;
  border-radius: 30px;
}

header .nav-bar .nav-2 ul .btn:hover, header .nav-bar .nav-2 ul .btn-black:hover {
  background-color: #F0F0F0;
}

header .nav-bar .nav-2 ul .btn-black {
  background-color: #000;
  color: #fff;
}

header .nav-bar .nav-2 ul .btn-black:hover {
  background-color: #4C4C4C;
}

.notice {
  background-color: #D8E8E3;
  padding: 2rem 0;
  margin-bottom: 2rem;
}

.notice p {
  width: 55%;
  letter-spacing: 0.05em;
  font-size: 19.5px;
  font-weight: 600;
  line-height: 1.75;
  text-align: center;
  margin: auto;
}

.notice p a {
  color: #000;
  text-decoration: underline;
}

.notice p a:hover {
  text-decoration: none;
}
/*# sourceMappingURL=styles.css.map */
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./images/starbucks-favicon.png">
    <!-- Google Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;900&display=swap" rel="stylesheet">
    <!-- FontAwesome CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
    <title>Starbucks Coffee Company</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <header>
        <div class="logo">
            <img src="./images/starbucks-logo.png" alt="starbucks-logo">
        </div>
        <div class="nav-bar">
            <nav class="nav-1">
                <ul>
                    <li><a href="#">Menu</a></li>
                    <li><a href="#">Rewards</a></li>
                    <li><a href="#">Gift Cards</a></li>
                </ul>
            </nav>
            <nav class="nav-2">
                <ul>
                    <li><a href="#"><i class="fas fa-map-marker-alt"></i> Find a store</a></li>
                    <li><a class="btn" href="#">Sign in</a></li>
                    <li><a class="btn-black" href="#">Join now</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="notice">
        <p>Facial coverings are now optional in our stores for our fully vaccinated customers, following CDC guidance, except where local regulations require it by law. <a href="#">Learn more</a></p>
    </div>
</body>
</html>

​

如果紧接<div>的<header>具有transparent背景，也可以查看阴影，但是由于您已经给了它一种特定的背景处理，这似乎是一种解决方案，在这种情况下不值得尝试。

更新

此外，正如用户在注释中指出的那样，考虑到<header>后面的<div>没有显式的position (因此具有默认的position值static)，这里的z-index实际上可以被省略。你可以在下面看到这个：

​

代码语言：javascript
复制
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: 'Source Sans Pro', sans-serif;
  text-decoration: none;
  list-style: none;
}

header {
  height: 101px;
  -webkit-box-shadow: 0 0 5px #000;
          box-shadow: 0 0 5px #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 0 40px;
  position: relative; /* added position relative ONLY; omitted z-index */
  /* z-index: 2; */
}

header .logo {
  margin-right: 4rem;
}

header .logo img {
  width: 51px;
}

header .nav-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
  font-weight: 700;
}

header .nav-bar a {
  color: #000;
}

header .nav-bar a:hover {
  color: #008248;
}

header .nav-bar .nav-1 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  letter-spacing: 0.1em;
}

header .nav-bar .nav-1 ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-transform: uppercase;
}

header .nav-bar .nav-1 ul li {
  margin-right: 24px;
}

header .nav-bar .nav-2 ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

header .nav-bar .nav-2 ul li {
  margin-left: 24px;
}

header .nav-bar .nav-2 ul .btn, header .nav-bar .nav-2 ul .btn-black {
  padding: 7px 16px;
  border: 1px solid #000;
  font-size: 14px;
  border-radius: 30px;
}

header .nav-bar .nav-2 ul .btn:hover, header .nav-bar .nav-2 ul .btn-black:hover {
  background-color: #F0F0F0;
}

header .nav-bar .nav-2 ul .btn-black {
  background-color: #000;
  color: #fff;
}

header .nav-bar .nav-2 ul .btn-black:hover {
  background-color: #4C4C4C;
}

.notice {
  background-color: #D8E8E3;
  padding: 2rem 0;
  margin-bottom: 2rem;
}

.notice p {
  width: 55%;
  letter-spacing: 0.05em;
  font-size: 19.5px;
  font-weight: 600;
  line-height: 1.75;
  text-align: center;
  margin: auto;
}

.notice p a {
  color: #000;
  text-decoration: underline;
}

.notice p a:hover {
  text-decoration: none;
}
/*# sourceMappingURL=styles.css.map */
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./images/starbucks-favicon.png">
    <!-- Google Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;900&display=swap" rel="stylesheet">
    <!-- FontAwesome CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
    <title>Starbucks Coffee Company</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <header>
        <div class="logo">
            <img src="./images/starbucks-logo.png" alt="starbucks-logo">
        </div>
        <div class="nav-bar">
            <nav class="nav-1">
                <ul>
                    <li><a href="#">Menu</a></li>
                    <li><a href="#">Rewards</a></li>
                    <li><a href="#">Gift Cards</a></li>
                </ul>
            </nav>
            <nav class="nav-2">
                <ul>
                    <li><a href="#"><i class="fas fa-map-marker-alt"></i> Find a store</a></li>
                    <li><a class="btn" href="#">Sign in</a></li>
                    <li><a class="btn-black" href="#">Join now</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="notice">
        <p>Facial coverings are now optional in our stores for our fully vaccinated customers, following CDC guidance, except where local regulations require it by law. <a href="#">Learn more</a></p>
    </div>
</body>
</html>

​

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/68199807

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档