JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://library-ontodia-org.herokuapp.com/assets/0.4.0-dev.20170315/ontodia.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="applet-container">
  <div class="applet">
      <div class="sticky-header">
        Sticky Header 
        <div class="dropdown">
          <button class="dropbtn">Dropdown</button>
          <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </div>
        Dropdown content should be displayed over the sticky header
      </div>
      <div class="content">Content 1 that will be displayed over</div>
  </div>
    <div class="applet">
      <div class="sticky-header">
        Sticky Header 
        <div class="dropdown">
          <button class="dropbtn">Dropdown</button>
          <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </div>
       Dropdown content should be displayed over the sticky header
      </div>
      <div class="content">Content 2 that will be displayed over</div>
  </div>
    <div class="applet">
      <div class="sticky-header">
        Sticky Header 
        <div class="dropdown">
          <button class="dropbtn">Dropdown</button>
          <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </div>
        </div>
        Dropdown...

CSS

.applet-container {
  position: relative;
  overflow: scroll;
  width: 100%;
  height: 200px;
  z-index: 1;
}

.applet {
  position: relative;
  z-index: 2;
}

.sticky-header {
    top: 0px;
    position: sticky;
    background: #d1d1d1;
    z-index: 3;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
  z-index: 4;
}

.dropdown-content {
  display: none;
  position: absolute;
  /* position: relative; */
  /* background-color: #f9f9f9; */
  background-color: gold;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 5;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
  z-index: 5;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}