标题隐藏在我的 div 后面答案

【问题标题】：Header is hiding behind my div标题隐藏在我的 div 后面
【发布时间】：2018-09-08 22:06:33
【问题描述】：

所以我正在执行定位，我正在制作一个“简单”的网站，但我在第 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>

【问题讨论】：

标签： html css flexbox positioning

【解决方案1】：

注意：

相对定位的元素从文档中的正常位置偏移给定数量，但该偏移不会影响其他元素。

--Relative Positioning @ MDN;强调我的。

所以，.mission 上的 top:20px 会抵消它而不影响其他元素，导致它们重叠。

我不确定.mission 上的top:20px 的用途，但如果有必要，您可以考虑使用margin 而不是top。如果没有必要，您可以完全删除top。

使用边距将<header 向下推。这是collapsing margins 的结果。有various methods 来展开页边距，每个都有自己的优点和缺点。在下面的示例中，我在<body> 上使用了::before 伪元素。

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

【讨论】：

ty 也可以，问题是：使用margin: 标头被推下
我明白你的意思。这似乎是由collapsing margins 引起的。请查看我的编辑。
非常非常，我刚刚阅读了“折叠边距”，但我真的不明白发生了什么。以及为什么将 top 设置为 0。您能给我一个简单的解释吗？ :p
This article 可能有助于解释为什么边距会崩溃。我在<header> 上使用top 以确保它位于顶部，因为.mission 边距与<body> 一起折叠。但我已经编辑了我的答案以使用不同的方法：<body> 上的伪元素。

【解决方案2】：

您需要删除任务类中的“位置：相对”。

【讨论】：

可以工作但是.mission div 向上移动，我需要position: relative; 将其定位在标题下。
然后，您需要在 .mission 元素下为您想要的每个元素添加“位置：相对”。因此，您还需要添加相对于 h2 标签的位置。然后您可能需要添加一个顶部：40px 左右。（因为您也为任务添加了一个“顶级”css）

【解决方案3】：

您需要将 Z-index 添加到您的 css，所有内容通常都是 z-index 1，所以如果您想在前台添加一些东西，只需给它 z-index 2 或 3

【讨论】：

是的，我知道，但我不希望 h2 位于堆栈顶部，我希望它位于 div 下
你的 h2 不在一个 div 中，如果你把它放在一个 div 中并且在所有 div 周围有一个包装器，你可以将所有 div 放在彼此之下，甚至使用响应式包装器你可以给 div绝对位置