Перекрытие текста в раскрывающемся меню

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

Основываясь на ответе @AgataB, я нашел другое приятное решение. Вместо изменения z-индекса содержимого я изменяю z-индекс выпадающего списка.

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

Теперь содержимое не перекрывает выпадающий список, а draggable по-прежнему работает.

Answer 2

Вы можете установить Z-индекс перетаскиваемого элемента в CSS с:

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

z-index: -1 устанавливает его в спину, и он работает только на расположенные элементы, следовательно, необходимость в обеих настройках. More on it here.

Обратите внимание, что это позиционирует перетаскиваемый элемент сзади, за всем, включая кнопку. Если это не намерение, я дам вам понять остальное. Удачи!