ページ全体の上にドラッグ可能なdiv（ページの読み込み時）

Question

私はjavascriptとjqueryを使ってページに配置したドラッグ可能な要素を含むべきウェブプロジェクトに取り組んでいます。

すべてが意図したとおりに動作していますが、ドラッグ可能なdivはその上と下のdivの間にある程度のスペースを占めています。ページを読み込んだ直後に、このドラッグ可能な要素がページの残りの部分に表示されるようにします。つまり、上のdivと下にあるdivの間のスペースを取らず、すべての上に生成されるようにします。下のビデオとjsfiddleを参照してください。

これをどのように達成できますか？このような

JSFiddle

Answer 1

使用position:absolute;：

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

はJsfiddleを更新しました。

また、CSSでは間違ったセレクタタイプを使用していました。あなたのHTMLにはid draggableがあり、あなたのCSSにはそれをクラスとして使っていました。これで

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

：

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

CSSでこれを変更