z-index & position: fixed

by Bernie Lee

HTML

<body>
<div class="container">
  <div class="overlay"></div>
  <div class="header">Overlay with z-index:0 or more will overlay this div even though this div is z-index:5 because this div is by default position: static. To make the z-index value be respected, set position: relative</div>
  <div class="content">Overlay with z-index of 4 or more will overlay this div because this div is position: absolute and z-index: 3</div>
</div>
</body>

CSS

body {
  margin: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  background-color: aquamarine;
  box-sizing: content-box;
}

.overlay {
  display: block;  
  width: 100%;
  height: 100%;  
  left: 0;
  top: 0;
  position: fixed;  
  background-color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  z-index: 3;
}

.header {
  width: calc(50% - 40px);
  height: 100%;
  /* position: relative; */
  background-color: white;  
  padding: 20px;
  z-index: 5;  
}

.content {
  width: calc(50% - 40px);
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  background-color: green;  
  padding: 20px;
  z-index: 3;  
}