因此，我正在进行定位，我正在制作一个简单的＆＃34;网站，但我在第25行的<h2>有问题。它隐藏在.mission div后面而不在它之下。我在监督什么？
这是我的git存储库的链接：https://github.com/itsolidude/Tea_Cozy
这里是普通代码：
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
z-index: 2;
background-color: black;
}
img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
.mission-banner {
background-color: black;
}
.mission-banner h4 {
padding-bottom: 10px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
.mission {
background-image: url(../images/img-mission-background.jpg);
position: relative;
margin: 0 auto;
top: 70px;
width: 1200px;
height: 700px;
display: flex;
flex-direction: column;
justify-content: center;
}
.tea-of-month {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1000px;
margin: 0 auto;
}
.tea-of-month img {
height: 200px;
width: 300px;
margin-bottom: 10px;
}
.item {
display: flex;
flex-direction: column;
padding: 10px;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tea Cozy | Home</title>
<link rel="stylesheet" href="./resources/css/style.css">
</head>
<body>
<header>
<img src="./resources/images/img-tea-cozy-logo.png" alt="our logo">
<nav>
<a href="#"><span>Mission</span></a>
<a href="#"><span>Featured Tea</span></a>
<a href="#"><span>Locations</span></a>
</nav>
</header>
<!-- main-content,our mission -->
<div class="mission">
<div class="mission-banner">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<!-- tea of the month -->
<h2>Tea of the Month</h2> <!--ERROR HERE, ITS HIDING BEHIND THE .MISSION DIV -->
<h4>What's Steeping at The Tea Cozy?</h4>
<div class="tea-of-month">
<div class="item">
<img src="./resources/images/img-berryblitz.jpg" alt="A picture of Fall Berry Blitz Tea">
<span>Fall Berry Blitz Tea</span>
</div>
<div class="item">
<img src="./resources/images/img-spiced-rum.jpg" alt="A picture of Spiced Rum Tea">
<span>Spiced Rum Tea</span>
</div>
<div class="item">
<img src="./resources/images/img-donut.jpg" alt="A picture of Seasonal Donuts">
<span>Seasonal Donuts</span>
</div>
<div class="item">
<img src="./resources/images/img-myrtle-ave.jpg" alt="A picture of Myrtle Ave Tea">
<span>Myrtle Ave Tea</span>
</div>
<div class="item">
<img src="./resources/images/img-bedford-bizarre.jpg" alt="A picture of Bedford Bizarre Tea">
<span>Bedford Bizarre Tea</span>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
你需要在你的css中添加Z-index，一切都是正常的z-index 1所以如果你想要一些东西，只需给它z-index 2或3
答案 1 :(得分：0)
您需要移除＆＃39; position：relative＆＃39;在任务课上。
答案 2 :(得分：0)
请注意：
相对定位的元素从文档中的正常位置偏移给定量，但没有偏移影响其他元素。
- Relative Positioning @ MDN;强调我的。
因此，top:20px上的.mission会对其进行抵消，而不会影响其他元素，导致它们重叠。
我不确定top:20px上.mission的用途，但如果有必要，您可以考虑使用margin代替top。如果没有必要，您可以完全删除top。
使用保证金将<header向下推。这是collapsing margins的结果。有various methods来解开边缘，每个边缘都有自己的优点和缺点。在下面的示例中，我在::before上使用了<body>伪元素。
另见Collapsing Margins @ w3.org。
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
text-align: center;
}
/* UNCOLLAPSE MARGIN */
body::before {
clear: both;
content: "";
display: table;
margin-top: -1px;
height: 0;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
z-index: 2;
background-color: black;
}
img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
.mission-banner h4 {
padding-bottom: 10px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
.mission {
position: relative;
margin: 70px auto 0;
width: 1200px;
height: 700px;
display: flex;
flex-direction: column;
justify-content: center;
}
.tea-of-month {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1000px;
margin: 0 auto;
}
.tea-of-month img {
height: 200px;
width: 300px;
margin-bottom: 10px;
}
.item {
display: flex;
flex-direction: column;
padding: 10px;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tea Cozy | Home</title>
<link rel="stylesheet" href="./resources/css/style.css">
</head>
<body>
<header>
<img src="./resources/images/img-tea-cozy-logo.png" alt="our logo">
<nav>
<a href="#"><span>Mission</span></a>
<a href="#"><span>Featured Tea</span></a>
<a href="#"><span>Locations</span></a>
</nav>
</header>
<!-- main-content,our mission -->
<div class="mission">
<div class="mission-banner">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<!-- tea of the month -->
<h2>Tea of the Month</h2>
<!--ERROR HERE, ITS HIDING BEHIND THE .MISSION DIV -->
<h4>What's Steeping at The Tea Cozy?</h4>
<div class="tea-of-month">
<div class="item">
<img src="./resources/images/img-berryblitz.jpg" alt="A picture of Fall Berry Blitz Tea">
<span>Fall Berry Blitz Tea</span>
</div>
<div class="item">
<img src="./resources/images/img-spiced-rum.jpg" alt="A picture of Spiced Rum Tea">
<span>Spiced Rum Tea</span>
</div>
<div class="item">
<img src="./resources/images/img-donut.jpg" alt="A picture of Seasonal Donuts">
<span>Seasonal Donuts</span>
</div>
<div class="item">
<img src="./resources/images/img-myrtle-ave.jpg" alt="A picture of Myrtle Ave Tea">
<span>Myrtle Ave Tea</span>
</div>
<div class="item">
<img src="./resources/images/img-bedford-bizarre.jpg" alt="A picture of Bedford Bizarre Tea">
<span>Bedford Bizarre Tea</span>
</div>
</div>
</body>
</html>