子容器上边距拉低父上边距

Question

我在父容器中有一张背景图片，覆盖了整个屏幕宽度。

我想要一个在父容器中居中的子容器，它将包含一些文本并具有半透明的背景颜色。

无论我如何尝试设置子容器的上边距，父容器的上边距都会随着子容器的上边距移动，就好像两个顶部边缘“粘合”在一起一样。父级的边距跟随子级的。

如何使包含的元素 (.content) 向下移动，同时将图像的上边缘固定在页面顶部？

谢谢！

BG image follows box's top margin

/* Header */

.hero {
  background: url('../images/hero_laptop_2.jpg') no-repeat center center/cover;
  height: 75vh;
  position: relative;
  color: #fff;
}

.hero .content {
  border: solid black 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 40%;
  height: 60%;
  padding: 20px;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  margin-top: 200px;
}

<header class="hero">
  <div id="navbar" class="navbar top">
    <h1 class="logo">
      <span class="text-primary"><i class="fas fa-desktop"></i> IT</span>-Simplified</h1>
    <h1 id="navbar-phone">845-520-1115</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="testimonials.html">Testimonials</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="#contact-form">Contact</a></li>
      </ul>
    </nav>
  </div>

  <div class="content">
    <h1>Welcome to IT-Simplified</h1>
    <p>We Provide COMPUTER SOLUTIONS... <br>Simply & Affordably.</p>
    <p id="call-us">Call Us: 845-520-1115</p>
    <!-- <a href="testimonials.html" class="btn"><i class="fas fa-chevron-right"></i> Testimonials</a> -->
  </div>
</header>

Answer 1

您需要向 .hero .content 类添加绝对位置或其他定位，以便它独立于父容器浮动在背景之上。编辑：在下面的解决方案中，我使用了position: relative;。

z-index 是无关紧要的，因为定位将它带出正常的 html 流上下文，所以我删除了它。做了一些其他的更改，看看（使用全屏，在内容框下方的小sn-p区域无法正确显示）。

或者，您可以尝试创建 .hero 容器 display: flex;，以便将其子容器放置在其中，但在您希望顶部导航和下方内容的情况下，这似乎并不实用。

/* Header */

.hero {
  background: url('https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2017/11/autumn_fireball/17255671-1-eng-GB/Autumn_fireball.jpg') no-repeat center center/cover;
  height: 100vh;
  color: #fff;
}

.hero .content {
  color: white;
  position: relative;
  border: solid yellow 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 40%;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
}

<header class="hero">
  <div id="navbar" class="navbar top">
    <h1 class="logo">
      <span class="text-primary"><i class="fas fa-desktop"></i> IT</span>-Simplified</h1>
    <h1 id="navbar-phone">845-520-1115</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="testimonials.html">Testimonials</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="#contact-form">Contact</a></li>
      </ul>
    </nav>
  </div>

  <div class="content">
    <h1>Welcome to IT-Simplified</h1>
    <p>We Provide COMPUTER SOLUTIONS... <br>Simply & Affordably.</p>
    <p id="call-us">Call Us: 845-520-1115</p>
    <!-- <a href="testimonials.html" class="btn"><i class="fas fa-chevron-right"></i> Testimonials</a> -->
  </div>
</header>

结果：