下拉菜单上的重叠文本

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 中的可拖动 class。如您所见，内容是可拖动的，我使用 JQuery-UI 中的 class 作为它的内容。这是 class 的文档： 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;
}

现在，内容不与下拉菜单重叠，并且可拖动仍在工作。

下拉菜单上的重叠文本

Overlap Text on Dropdown Menu

jquery

jquery-ui

jquery-ui-draggable

drop-down-menu