How to give a fixed position div a z-index

Question

I'm working on a website that has a lot of z-index values and I'm trying to make a Drag & Drop menu that you can move around but stays in the screen space at all times. But because the drag & drop menu would have a fixed position it breaks the z-index positioning (it reveals borders that it wouldn't if it was positioned absolute).

I understand that you can't position a fixed element with z-index but do you guys maybe know a workaround for it?

Here is the JS fiddle of what I have so far (I left the header in): https://jsfiddle.net/wdeyvb7q/

HTML:

    <div id="menu-container">
    <div id="draggable3" class="draggable ui-widget-content">
    <p>I'm a very confused box, position fixed on my container breaks the style.</p>
    </div>
    </div>

CSS (with #menu-container absolute):

#menu-container { 
    width: calc(90vw - 94px); 
    height: calc(100vh + 8px); 
    top: -4px; 
    position: absolute; 
    left: calc(5vw + 47px); 
}

.draggable { 
    background: white; 
    width: 100%; 
    height: 90px; 
    float: left; 
    position: absolute; 
    z-index: 200; 
    border-top: 4px solid black; 
    border-bottom: solid black; 
}
#draggable, #draggable2 { 
    margin-bottom:0px; 
}

#draggable { 
    cursor: n-resize; 
}

JS:

    $( function() {
    $( "#draggable3" ).draggable({ containment: "#menu-container", scroll: false });
    } );

And here are 2 screenshots of an absolute & fixed position

Answer 1

I solved it! I removed both inner borders of the sidebars and added 2 divs floating left and right. By positioning those divs under the menu code in the HTML file it will stay under the menu, so I added a border on each side and that didn't break the design =)!

JSFiddle: https://jsfiddle.net/adf2gte7/

HTML:

    <!-- Left And Right Inner Borders -->
    
    <div class='left-border-menu'></div>
    <div class='right-border-menu'></div>

CSS:

/* Inner Borders */

.left-border-menu {
  width: calc(5vw + 47px); 
  height: 2000px; 
  background: orange; 
  float: left; 
  border-right: 4px solid black;
}

.right-border-menu {
  width: calc(5vw + 47px); 
  height: 2000px; 
  background: orange; 
  float: right; 
  border-left: 4px solid black;
}