Overlapping of parent over child

I am trying to create a floating menu. Therefore I would like a parent element to overlap its child. I’ve researched that a z-index of -1 on the child and auto on the parent should work. The elements are both positioned absolute.

The blue rectangular children should pop out of the circular red parents. To not hide the circle, the child must slide out from below.

However in my code it does not work.

Could you point me in the right direction what I am doing wrong?

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;
  }
}

Here’s the codepen version of what I am trying to do – you can ignore the JavaScript.
https://codepen.io/Manuel-Simon-the-bold/pen/oNKwoWW

You need to sign in to view this answers

Related Post