Question

我的下拉菜单存在问题，该问题与页面内容重叠。以下是它的jsfiddle：https://jsfiddle.net/yusrilmaulidanraji/qu4fnxLn/ 这是我的代码：

HTML：

    <div class="dropdown" style="float:left;">
      <button class="dropbtn">Left</button>
      <div class="dropdown-content" style="left:0;">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </div>
<br><br><br><br>
<div id="draggable" class="draggable draggable-text ui-draggable ui-draggable-handle content" title="Click and Drag to the Grid">Company Name</div>

CSS：

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

JS：

$( function() {
    $( "#draggable" ).draggable();
  });

我认为问题的根源是来自JQuery-UI的可拖动类。正如您所看到的，内容是可拖动的，我使用JQuery-UI中的类。这是该类的文档： https://jqueryui.com/draggable/

那么，是否有任何解决方案使内容与下拉菜单不重叠？提前谢谢。

被修改：以前我试图简化我的案例，但结果却有不同的年表。为了使其精确，我用我的实际项目的情况做了一个新的jsfiddle（我也尝试简化它，但希望它最终会有相同的解决方案）。这是我的项目的jsfiddle： https://jsfiddle.net/yusrilmaulidanraji/qu4fnxLn/4/

Answer 1

您可以使用以下命令设置CSS中可拖动元素的z-index：

.draggable {
  position: absolute;
  z-index: -1
}

z-index: -1将其设置为后面，它仅适用于定位元素，因此需要两种设置。 More on it here.

请注意，这会将可拖动元素放置在包括按钮在内的所有内容的后面。如果那不是意图，我会让你弄明白其余的。祝你好运！

Answer 2

根据@AgataB的回答，我找到了另一个不错的解决方案。我没有更改内容的z-index，而是更改了下拉列表的z-index。

.dropdown {
    position: relative;
    display: inline-block;
    z-index: 1;
}

现在，内容与下拉列表不重叠，并且可拖动的内容仍然有效。

下拉菜单上的重叠文本

2 个答案: