How do you place in front of image in html and css so that you can read it?

Question

So I am trying to make the <h1></h1> above the image so that you can read it, but it randomly appears at the left bottom of the screen. I am doing this with vertical grid-columns so maybe that is the problem. Can somebody see what I am doing wrong and help me out?

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: 'Ubuntu', sans-serif;
  scroll-behavior: smooth;
}

.clear {
  clear: both;
}

.container {
  display: grid;
  column-gap: 20px;
  grid-template-columns: repeat(16, 1fr);
}

.container .beginpagina {
  grid-column: 1 / 17;
  height: 700px;
  position: relative;
}

.container .beginpagina img {
  width: 100%;
  height: auto;
  filter: blur(0.7px);
  clip-path: polygon(100% 0, 100% 60%, 50% 78%, 0 60%, 0 0);
}

.container .beginpagina h1 {
  position: absolute;
  color: red;
  font-size: 30px;
}

<div class="container">

  <div class="clear"></div>

  <div class="beginpagina">
    <img src="img/universe3.jpeg" />
    <h1>Beginpagina</h1>
  </div>

</div>

Answer 1

With CSS-Grid you do not need to use positioning. Just place the items in the same grid-cell.

For layering, just adjust the z-index of the h1.

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-family: 'Ubuntu', sans-serif;
  scroll-behavior: smooth;
}


.container {
  display: grid;
  column-gap: 20px;
  grid-template-columns: repeat(16, 1fr);
}

.container .beginpagina {
  grid-column: 1 / -1;
  height: 700px;
  position: relative;
  display:grid
}

.container .beginpagina img {
  width: 100%;
  height: auto;
  filter: blur(0.7px);
  clip-path: polygon(100% 0, 100% 60%, 50% 78%, 0 60%, 0 0);
  grid-row: 1;
  grid-column:1;
}

.container .beginpagina h1 {
  color: red;
  font-size: 30px;
  grid-row: 1;
  grid-column:1;
  z-index:2;
  text-align:center;
}

<div class="container">

  <div class="beginpagina">
  <img src="https://assets.codepen.io/3999/chicago_dual_monitor-2560x1024.jpg" />
    <h1>Beginpagina</h1>
  </div>

</div>