Can a child of an element with z-index -1 appear over its parent's parent?

Question

I'm trying to make a popup that has an expanded area that appears from under it. The width of the popup is variable, so the expanded area must be a child of the popup element in order to always appear in the correct position, so it's z-index should be -1. The white button should move to the right as it toggles the expansion, so it should be a child of the expanded area, but that way it can't appear over the main popup, since its parent has a z-index of -1.

Ideally it should look something like this: https://cdn.discordapp.com/attachments/496805607454670888/558592164452499456/unknown.png

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup {
  position: relative;
  background: lightgray;
}

.popup-content {
  width: 100px;
  height: 100px;
}

.popup-expanded-container {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: calc(100% - 30px);
  background-color: darkgray;
  z-index: -1;
  padding: 10px;
  padding-left: 40px;
  padding-top: 40px;
}

.popup-expanded-content {
  width: 0px;
}

.expanded-toggle-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
}

<div class="container">
  <div class="popup">
    <div class="popup-content"></div>
    <div class="popup-expanded-container">
      <div class="expanded-toggle-btn"></div>
      <div class="popup-expanded-content">
      
      </div>
    </div>
  </div>
</div>

Related - https://stackoverflow.com/questions/3032856/is-it-possible-to-set-the-stacking-order-of-pseudo-elements-below-their-parent-e — Paulie_D, Mar 22 '19 at 12:14
All child elements, regardless of z-index, will appear over their ancestors. — Sean, Mar 22 '19 at 13:11
@sean this is not true, child element can appear below ancestor — Temani Afif, Mar 22 '19 at 14:27

score 0 · Answer 1 · answered Mar 22 '19 at 13:27

Not The Same but you can get that result easly by doing this

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup {
  position: relative;
  background: lightgray;
}

.popup-content {
  width: 100px;
  height: 100px;
}

.popup-expanded-container {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: calc(100% - 30px);
  background-color: darkgray;
  z-index: -1;
  padding: 10px;
  padding-left: 40px;
  padding-top: 40px;
}

.popup-expanded-content {
  width: 0px;
}

.expanded-toggle-btn {
  position: absolute;
  top: 15px;
  left: calc(100% - 30px + 12px);
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  border: 3px solid darkgrey;
}

<div class="container">
  <div class="popup">
    <div class="popup-content"></div>
      <div class="expanded-toggle-btn"></div>
    <div class="popup-expanded-container">
      <div class="popup-expanded-content">
      
      </div>
    </div>
  </div>
</div>

Can a child of an element with z-index -1 appear over its parent's parent?

1 Answers1