下拉菜单上的重叠文本答案

【问题标题】：Overlap Text on Dropdown Menu下拉菜单上的重叠文本
【发布时间】：2016-07-26 09:06:28
【问题描述】：

我的下拉菜单存在与页面内容重叠的问题。这是它的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/

【问题讨论】：

标签： jquery jquery-ui drop-down-menu jquery-ui-draggable

【解决方案1】：

您可以在 CSS 中设置可拖动元素的 z-index：

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

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

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

【讨论】：

我试图把 style="z-index: -1;"到可拖动元素。不幸的是，它关闭了可拖动的。 :( 你还有别的选择吗？
它适用于我，直到您点击下拉菜单中的任何内容 - 这也不需要吗？
是的，对于拖动部分，它已经工作了。但它与下拉菜单重叠。 postimg.org/image/fe8rg8ech
jsfiddle.net/Douma37/qu4fnxLn/1 试试这个。展开菜单时，可拖动元素位于其后面。您只需要在 CSS 中设置样式。编辑：imgur.com/0fGoCvO - 截图
你是对的，它有效！但不幸的是，我认为我的项目中有问题。我试图在我的项目中实现它，但它不起作用。没有把整个案子放好是我的错误，我只是在第一次尝试使它变得简单。如果你不介意，愿意帮助我吗？这是我项目的jsfiddle。（我也尝试过简化它，希望最后会有相同的结果）jsfiddle.net/yusrilmaulidanraji/qu4fnxLn/4

【解决方案2】：

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

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

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

【讨论】：