将元素置于绝对定位的叠加层之上

Question

如何将此sandbox中的h2元素置于叠加层之上？

<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

将元素的位置从static更改为relative / absolute / fixed。 position: static（默认设置）不允许z-index（）：

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

Answer 2

如果您的意思是<{1}}应该在前面覆盖DIV，请将其CSS更改为：

h2

（我添加了白色以使其更清晰，它不在h2 { z-index: 200; position: absolute; color: white; } 之后）