.wrap {
  font-size: 2rem;
  display: flex;
}

.title {
  font-size: 1.2em;
  margin-bottom: 60px;
}

.main-content {
  width: 70%;
  background-color: palegreen;
  padding: 40px 20px 200px;
  z-index: 1; /* this z-index creates a stacking context for all main's children */
}

div {
  padding: 20px 20px 60px;
}

.hoverable {
  width: 60%;
  background-color: #cfc;
  border: 3px dashed darkgreen;  
  position: relative;
}

.popup {
  width: 80%;
  background-color: #dfd;
  border: 3px dashed darkgreen;
  display: none;
  position: absolute;
  left: 75%;
  z-index: 10000000000; /* This won't work!*/
}

.hoverable:hover > .popup {
  display: block;
}

.sidebar {
  width: 30%;
  background-color: cornsilk;
  padding: 40px 0 200px;
  z-index: 2;
}

.sidebar .title {
  margin-left: 20px;
}

.sidebar-element {
  background-color: blanchedalmond;
  border: 3px dashed indianred;
  padding-bottom: 200px;
  position: relative;
  z-index: 3; /* this z-index is higher than main's so everything inside main will go under this element */
}

/* NOTE: in this particular case, the whole thing would work fine with no z-indices at all. The popup would still go over the sidebar because positioned elements are higher in the stacking order than non-positioned elements. (position:relative would also have to be removed from the sidebar element for this to work) */