Search code examples
cssbootstrap-4transformz-index

z-index on bootstrap dropdown menu is not working with transform

I have tried a flip menu with the bootstrap dropdown menu using transform. The flip is working fine but the drop-down menu is rendering underneath the form elements even though z-index is present for the drop-down menu.

Upon reading, I understood its the stacking context issue when using transform but I couldn't able to figure out the solution.

The code is available here code link. The z-index is not applying due to the below code.

.frontbar {
    transform: translateY(0%) rotateX(0deg);
    transition: all 0.5s;
    transform-origin: 50% 100%;
}

.menubar {  
    transform: rotateX(-90deg);
    transition: transform 0.5s;
    transform-origin: 50% 0%;
}
  1. Click the Flip button
  2. click on the menu, the submenu in the dropdown is underneath the form elements
Solution

  • You need add the z-index to the parent :

    .wrapper.flip { z-index: 2;}