JSFiddle - React, Tailwind, and code Playground

by wheresmycookie

HTML

<div class="section-a">
  I am content
  
  <div class="menu"></div>
</div>
<div class="horizontal-clickable-container">
  <div class="horizontal-clickable-panel">
  </div>
</div>
<div class="section-b">
  I am also content
</div>

CSS

/* z-index: 101 */
.section-a {
  position: relative;
  height: 50px;
  width: 100%;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #aaa;
  z-index: 101;
}
.menu {
  position: absolute;
  left: 180px;
  top: 30px;
  width: 40px;
  height: 100px;
  background-color: blue;
}
.menu:hover {
  background-color: #00a;
}

/* z-index: 100 */
.horizontal-clickable-container {
  position: relative;
  height: 1px;
  width: 100%;
  background-color: green;
  z-index: 100;
}
.horizontal-clickable-panel {
  position: absolute;
  top: -10px;
  height: 21px;
  width: 100%;
  background-color: green;
  opacity: 0.5;
}

/* z-index: 99 */
.section-b {
  position: relative;
  height: 50px;
  width: 100%;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #aaa;
  z-index: 99;
}