z-index-fun

by larsolesimonsen

HTML

<div class="container">
  <div>
    <div class="row">Not highlighted</div>
    <div class="row highlighted">Highlighted</div>
    <div class="row">Not highlighted</div>
    <div class="row">Not highlighted</div>
  </div>
  <div class="overlay"></div>
</div>

CSS

.container {
  height: 500px;
  width: 500px;
  position: relative;
}
.overlay {
   position:absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   opacity: 0.5;
   z-index: 1;
   background-color: gray;
}
.row {
  background-color: pink;
}
.row.highlighted {
  position: relative;
  z-index: 2;
}