小贝子编程

添加新的div标记时，长方体阴影正在消失



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

* {
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 */
<!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>上的长方体阴影。我提出的解决方案是给你的<header>一个相对位置和一个正的z索引，这会使它更高；"垂直"；在z轴上：

* {
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 */
<!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>

如果紧接在<header>之后的<div>具有transparent背景，则也可以查看阴影，但由于您对其进行了特定的背景处理，因此在这种情况下似乎不值得尝试。

更新

此外，正如用户G-Cyrillu在评论中指出的那样，假设<header>之后的<div>没有明确的position(因此具有默认的position值static(，这里的z-index实际上可以被省略。你可以在下面看到：

* {
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 */
<!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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium