下拉菜單上的重疊文本

我的頁面內容重疊的下拉菜單出現問題。這裏是它的的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/

來源

2016-07-26 Yusril Maulidan Raji

基於@AgataB答案，我發現了另一個很好的解決方案。我不改變內容的z-index，而改變下拉的z-index。

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

現在，內容與下拉並不重疊，並且可拖動仍在工作。

來源

2016-07-27 09:16:02

您可以設置拖動元素的z-index的CSS中使用：

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

z-index: -1它套到後面，它僅適用於定位的元素，因此需要這兩個設置。 More on it here.

請注意，這會將可拖動元素放置在背後，包括按鈕在內。如果這不是我的意圖，我會讓你弄清楚其餘的。祝你好運！

來源

2016-07-26 09:33:42 AgataB

我試圖把style =「z-index：-1;」到可拖動的元素。不幸的是，它關閉了可拖拽。 :( 你還有其他的選擇嗎？ –

它適用於我，直到你點擊下拉菜單中的任何東西 - 是不是你想要的嗎？ – AgataB

是的拖動部分，它已經工作，但它與下拉菜單重疊https： //postimg.org/image/fe8rg8ech/ –

下拉菜單上的重疊文本

回答

相關問題