Using flexbox to replace fixed and absolute positioning I'm using flexbox to create a simple header, hero image with caption and footer.

As you can see from my snippet, the header is fixed and the hero image scrolls underneath.

Is there a way to achieve my layout without fixed or absolute positioning? I'm relatively new to flexbox and and haven't come across a solution.

For the image, I could use the background property, but I'd like to maintain what I have to easily implement img srcset and an alt tag.



body {
  margin: 0;
}

/* Flexbox */
.main-navigation,
.main-navigation ul,
.hero {
 display: flex;
 flex-flow: row wrap;
}

.main-navigation {
 justify-content: space-between;
 align-items: center;
}

/* Site header */
.site-header {
  position: fixed;
 top: 0;
 z-index: 9999; /* Always on top */
 width: 100%; /* Must have width for flex */
  padding: 24px;
  color: #fff;
  background-color: #021928;
}

/* Hero */
.hero {
 position: relative; /* For image */
 height: 100vh; /* Fill viewport */
  justify-content: center;
 align-items: center;
}

.hero img {
  position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: -1; /* Send image to back */
 height: 100vh;
 object-fit: cover;
 object-position: bottom;
}

/* Cosmetic */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
 margin-right: 12px;
}

li:last-child {
  margin: 0;
}

a,
a:visited,
a:focus,
a:hover {
  color: #fff;
}

p {
  padding: 24px;
}

.caption {
  padding: 0;
}


h1 {
  margin: 0 0 12px;
}

.logo {
  margin: 0;
}

.caption {
  max-width: 600px;
 text-align: center;
  color: #fff;
}

.site-footer {
  padding: 24px;
  background-color: #021928;
  color: #fff;
}
&lt;div class="site-header"&gt;
  
  &lt;nav class="main-navigation"&gt;
    &lt;h1 class="logo"&gt;Logo&lt;/h1&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item One&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item Two&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item Three&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  
&lt;/div&gt;&lt;!-- .site-header --&gt;

&lt;div class="hero"&gt;
  
  &lt;div class="caption"&gt;  
    &lt;h1&gt;Title goes here&lt;/h1&gt;
    &lt;p class="caption"&gt;And a caption&lt;/p&gt;
  &lt;/div&gt;

  &lt;img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/3963/production/_103119641_7623dbe4-9ef2-4108-a2f1-a745d0640c53.jpg" alt="Kittens"&gt;

&lt;/div&gt;&lt;!-- .hero --&gt;

&lt;div class="main"&gt;
  &lt;p&gt;Main page content&lt;/p&gt;
&lt;/div&gt;&lt;!-- .main --&gt;

&lt;div class="site-footer"&gt;
  &lt;span&gt;Some information about stuff&lt;/span&gt;
&lt;/div&gt;&lt;!-- .site-footer --&gt;
If you want the header to be "sticky" the only way is to make it position:fixed. In order to to push the rest of the content down, you need to know the headers height. Then you set a margin-top to your #hero.