Draggable div on top of entire page (on page load)

Question

I am working on a web project that should include a draggable element, which I placed in the page using javascript and jquery.

Everything is working as intended, but the div which is draggable takes up some space between the div above and below it. I would like this draggable element to be on top of the rest of the page right after loading the page, i.e. I would like it to not take up space between the div above and the div below but to be generated on top of everything. See the video and jsfiddle below.

How might I be able to accomplish this?

JSFiddle

Answer 1

Use position:absolute; like this:

$(function() {
  $("#draggable").draggable().css("position", "absolute");;
});

Updated Jsfiddle.

Also, In your CSS, you were using the wrong selector type. In your HTML you had the id draggable and in your CSS you were using it as a class.

Change your CSS as given below:

.draggable { 
    z-index: 4000;
    width: 350px; 
    height: 350px; 
    padding: 0em;
}

with this:

#draggable { 
    z-index: 4000;
    width: 350px; 
    height: 350px; 
    padding: 0em;
}