Text overlay options (grid, no absolute)

by ShaCP

HTML

<div class="container">
  <div class="title">
    TITLE
  </div>
  <div class="text">
    Some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
  </div>
  <div class="bg">
    <img class="image" src="https://cdn.mos.cms.futurecdn.net/ntFmJUZ8tw3ULD3tkBaAtf-1024-80.jpg" />
  </div>
</div>
<button>title<br>
text<br>
background in back</button>
<button>3 layer overlay</button>

CSS

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.container {
  width: 400px;
  margin: 0 auto;
  position: relative;
  background: lightgray;
  display: grid;
   max-width: 100vw;
  grid-template-rows: auto 1fr;
}

.container>div {
  /*   
  this 2 is all that's needed to keep elements overlaying each other
  grid-row-start: 1;
  grid-column-start: 1; */
  position: relative;
}

.title {
  grid-row: 1;
  grid-column: 1;
  font-size: 30px;
  z-index: 1;
}


.bg {
  grid-row: 1 / -1;
  grid-column: 1;
}

.image {
  width: 400px;
  height: 200px;
  /* this helps clear out the space that an image sometimes leaves at the bottom of containers */
  display: block
}

.text {
  /* remove grid-row: 2 to get text to bottom */
  grid-row: 2;
  grid-column: 1;
  z-index: 1;
}