Bring an element above an absolutely positioned overlay

Question

How can the h2 element in this sandbox be brought up above the overlay?

<h1>Hello Plunker!</h1>
<h2>Above the overlay</h2>
<div class="overlay"></div>

.overlay {
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  background-color: rgba(34, 34, 34, 0.8);
  z-index:100;
}

h2 {
   z-index:200;
}

https://plnkr.co/edit/md2lIJCbhnEcc1XAbrne?p=preview

Answer 1

If you mean that the h2 should be in front of the overlay DIV, change its CSS to:

h2 {
    z-index: 200;
    position: absolute;
    color: white;
}

(I added the white color to make it clearer that it's not behind overlay)

Answer 2

Change the position of the element from static to relative / absolute / fixed. position: static (the default) doesn't allow z-index (demo):

h2 {
  position: relative;
  z-index:200;
}