如何给固定位置div的z-index

debugcn 发表于 Dev

贾斯汀·泰勒（Justin Taylor）

我正在一个具有很多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个屏幕截图

贾斯汀·泰勒（Justin Taylor）

我解决了！我删除了侧边栏的两个内部边框，并向左右浮动了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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。