z-index -1元素的子元素能否出现在其父元素的父元素上方？

Question

我正在尝试制作一个弹出窗口，该弹出窗口具有从下方显示的扩展区域。弹出窗口的宽度是可变的，因此扩展区域必须是popup元素的子元素才能始终显示在正确的位置，因此z-index的值应为-1。白色按钮在切换扩展时应向右移动，因此它应该是扩展区域的子级，但是那样它就不会出现在主弹出窗口上，因为其父级的z-index为- 1。

理想情况下，它看起来应该像这样：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>

Answer 1

不一样，但是您可以通过此操作轻松获得该结果

.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>