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

问题描述

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

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

无论我如何尝试设置子项的顶部边缘，父容器的顶部边缘都与子项的顶部边缘一起移动，就好像两个顶部边缘被“粘合”在一起。父母的保证金紧随孩子的保证金。

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

谢谢！

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html margin parent-child positioning