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

【问题标题】：How to give a fixed position div a z-index如何给一个固定位置的 div 一个 z-index
【发布时间】：2020-11-28 17:03:56
【问题描述】：

我正在开发一个具有大量 z-index 值的网站，并且我正在尝试制作一个拖放菜单，您可以在其中移动但始终保持在屏幕空间中。但是因为拖放菜单的位置是固定的，所以它会破坏 z-index 的定位（它会显示如果绝对定位则不会显示的边框）。

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

这是我目前所拥有的 JS 小提琴（我把标题留在了里面）： 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张绝对和固定位置的截图

【问题讨论】：

标签： css-position z-index draggable fixed absolute

【解决方案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;
}

【讨论】：