Jquery Draggable and Droppable Z-Index with Relative Container or Fixed Panel

I am having a problem with Jquery Draggable and Droppable where the drag item is behind a fixed position side panel.

The parent draggable #gallery container has to have relative positioning because I am using Muuri for the grid layout.

  #gallery { position: relative; width: 65%; z-index:1 }

The side panel has a fixed position so that it can act like a slideout panel. If I put a z-index on the side panel it appears over the container as it should, but the drag item always appears behind it instead of respecting the higher z-index of the ui-dragging item. If I remove the z-index on the side panel, then the side panel obviously goes behind the container when it should be over the top.

#trash { position: fixed; z-index: 2; width: 200px; }

I set the drag item z-index in CSS.

.ui-draggable-dragging {z-index:4; }

I tried attaching the clone to the document and setting a zIndex:

$( "li", $gallery ).draggable({
      cancel: "a.ui-icon", 
      revert: "invalid", 
      containment: "document",
      helper: "clone",
      cursor: "move",
      zIndex: 5
    });

• The #gallery container needs to be relative and is z-index 1
• The #trash side panel is fixed position and is z-index 2
• The drag item should be at the highest z-index: 3+

I am using one of the standard Droppable examples to simplify the example. I have removed Muuri from the example to rule that out.

Example: https://plnkr.co/edit/0SZ5Mjanh6sowC2uVnjS

It's easy to solve, update only one line code. please update your code add new CSS line

#gallery,
#trash  { z-index: inherit !important; }

See Demo: https://plnkr.co/edit/Y3SwKJj0RZswlVKOnVhW?p=preview