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

Question

我正在一个具有很多 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-positionz-indexdraggablefixedabsolute

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