如何给固定位置div一个z-index

Question

我在一个有很多 z-index 值的网站上工作，我正在尝试制作一个拖放菜单，您可以四处移动但保留在屏幕上 space每时每刻。但是因为拖放菜单有一个固定的位置，它打破了 z-index 定位（它显示了如果它是绝对定位则不会显示的边框）。

我知道您不能使用 z-index 定位固定元素，但是你们知道解决方法吗？

这是我目前所拥有的 JS fiddle（我把 header 留在了里面）： 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（#menu-container 绝对值）：

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

这里有 2 张绝对固定位置的屏幕截图

Answer 1

我解决了！我删除了侧边栏的两个内边框，并添加了 2 个左右浮动的 div。通过将这些 div 定位在 HTML 文件中的菜单代码下，它将保留在菜单下，所以我在每一侧添加了一个边框，这并没有破坏设计 =)!

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

如何给固定位置div一个z-index

How to give a fixed position div a z-index

fixed

z-index

css-position

draggable

absolute