父级与子级重叠

Question

我正在尝试创建一个浮动菜单。因此我希望父元素与其子元素重叠。我研究过，子项的 z-index 为 -1，父项的 z-index 应该有效。这些元素都是绝对定位的。

蓝色矩形子级应该从圆形红色父级中弹出。为了不隐藏圆圈，孩子必须从下面滑出。

但是在我的代码中它不起作用。

你能指出我做错了什么的正确方向吗？

HTML：

<div id="floating-button" class="show">
    <div id="main-button">
      ...
    </div>
    <div id="contact-button" class="action-button show animate">
      <div class="extended show"></div>
    </div>
    <div id="support-button" class="action-button show">
      <div class="extended show"></div>
    </div>
    <div id="newsletter-button" class="action-button show">
      <div class="extended show"></div>
    </div>
</div>

SCSS：

@mixin button {
  position: absolute;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  border: 2px solid white;
  border-radius: 40px;
  background-color: red;
  transition: scale .3s;
  
  &.show {
    display: block;
  }
  
  &.animate {
    scale: 1;
  }
}

#floating-button {
  position: fixed;
  bottom: 20px;
  right: 40px;
  width: 80px;
  height: 80px;
  
  &.show {
    height: 380px;
  }
  
  #main-button {
    @include button;
    
    bottom: 0px;
    right: 0px;
  }
  
  .action-button {
    @include button;
    display: none;
    scale: 0;
    z-index: auto;
    
    .extended {
      position: absolute;
      bottom: 16px;
      right: 40px;
      width: 0;
      height: 0;
      z-index: -1;
      transition: width .3s;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      
      &.show {
        width: 240px;
        height: 46px;
        background-color: blue;
      }
    }
  }
  
  #contact-button {
    bottom: 100px;
    right: 0px;
  }
  
  #support-button {
    bottom: 200px;
    right: 0px;
  }
  
  #newsletter-button {
    bottom: 300px;
    right: 0px;
  }
}

这是我正在尝试做的代码笔版本 - 你可以忽略 JavaScript。 https://codepen.io/Manuel-Simon-the-bold/pen/oNKwoWW

Answer 1

您可以使用 3D 变换将元素“塞入”其父元素下方。

在父级上设置

transform-style: preserve-3d

对于 .show 来说，不用担心 z-index 而是设置

transform: translate3d(0px, 0px, -1px);