Child container top margin pulls down parent top margin

Question

I've got a background image in a parent container that covers the full screen width.

I want a child container centered within the parent which will contain some text and have a semi-transparent background color.

No matter how I try to set the top margin of the child, the parent container's top margin moves along with the child's as if the two top edges are "glued" together. The parent's margin follows the child's.

How can I make the contained element (.content) move down while keeping the top edge of the image fixed to the top of the page?

Thanks!

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>

anatolhiman anatolhiman · Accepted Answer · 2020-09-21T20:38:45

You need to add a position absolute or other positioning to the .hero .content class so that it will float on top of the background, independently of the parent container. Edit: In my solution below I have used position: relative;.

The z-index is irrelevant as the positioning take it out of the normal html flow context, so I removed it. Did a few other changes, take a look (use full screen, in the small snippet area below the content box doesn't display correctly).

Alternatively, you could try to make the .hero container display: flex; so you can position its children within it, but that doesn't seem to be practical here where you want the navigation on top and content below.

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

Result:

Child container top margin pulls down parent top margin

1 Answers