Use CSS Grid instead of Position Absolute to stack (and center) your content

You no longer need to place so much reliance on position: absolute; to stack content on top of another element — for example, a heading and intro text on top of a photo. You can instead use CSS Grid to effectively stack items on top of each other, adjust their placement, and adjust their z-index. This could also be useful for when hiding and showing content with Javascript.

Create a parent element and add the following parameters. This sets the parent as a grid element and centers all of its children elements.
display: grid;
place-items: center;
Set the child elements (in this case a div and an img) with the following parameters. This sets both elements to span only the first column and row — effectively stacking them on top of one another.
grid-column: 1 / 2;
grid-row: 1 / 2;
Alternatively you could do:
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
Much like with position: absolute;, grid gives us the ability to use z-index! Set the img to be behind the div by setting the following parameter.
z-index: -1;

CodePen

HTML

<div class="masthead">
  <div class="masthead__content">
    <h1>Hawthorne & 37th</h1>
    <p>Movies, pizza, books, coffee, & more...</p>
  </div>
  <img src="https://images.unsplash.com/photo-1557698220-b1160b2dfd93?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80" alt="" class="masthead__image">
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}

p {
  margin: 0;
}

h1 {
  margin: 0 0 0.15em 0;
}

.masthead {
  display: grid; // 1) Set the parent container to display: grid;
  place-items: center; // 2) Place the grid children in the center (horizontally and vertically)
}

.masthead__content,
.masthead__image {
  grid-column: 1 / 2; // 3) have both the content and image span the same grid column
  grid-row: 1 / 2; // 4) have both the content and image span the same grid row
  
  // non-shorthand version:
  /*
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  */
}

.masthead__content {
  color: #fff;
  background: #000;
  border: 2px solid #fff;
  padding: 2em;
  text-align: center;
}

.masthead__image {
  z-index: -1; // 5) move the image element behind the content
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

March 21, 2023