JSFiddle - React, Tailwind, and code Playground

by tteguayco

HTML

<html>
<head></head>
<body>
  <div class="main-content">
    <div class="popover">
      <!-- I want this popover to be above the vertical-menu -->
    </div>
  </div>
  
  <div class="vertical-menu">
    <!-- I want this vertical-menu to be below the popever but above main-content -->
  </div>
</body>
</html>

CSS

.main-content {
  width: 500px;
  height: 300px;
  background-color: red;
}

.popover {
  width: 200px;
  height: 100px;
  background-color: blue;
  margin-left: 250px;
  /* z-index: 100;   THIS DOES NOT WORK */
}

.vertical-menu {
  position: absolute;
  top: 0;
  left: 400px;
  width: 100px;
  height: 300px;
  background-color: white;
  opacity: 0.8;
}