css z-index property is not working even on divs with position

Question

I am trying to make a draggable div visible over everything else while dragging it.

Here is my jquery touch punch code:

$('#draggable').draggable({
  zIndex: 99999999999,
  drag: function(event){...},
  helper: 'clone',
  position: 'absolute',
  owerflow: 'hidden'
})

I know that z-index works only on elements with position, so i added position:relative to other divs as well. But it only works when i am on the parent div of the draggable element. I use a huge css file with lot of classes so i cant copy the proper part of it.

Answer 1

You dont need ani position in css, just create a custom function for helper where you add the actually dragged element to the outer element which contains your drop element as well.

$('#draggable').draggable({
  zIndex: 20,
  drag: function(event){...},
  helper: function(){
    $("#outerElement").append($("#draggable").clone().attr('id', 'itWorks'))
    return $("#itWorks");
  },
})