<div class="wrap">
<main class="main-content">
  <p class="title">this is the main area</p>
  <div class="hoverable">this is an element you hover over...<div class="hoverable popup">... to make this element appear<div class="popup">oh and this one too</div></div></div>
<aside class="sidebar">
  <p class="title">this is a sidebar</p>
  <div class="sidebar-element">this is an element inside the sidebar.</div>
.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) */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.