javascript - jqueryui resizeable and draggable element is covered -

i have 2 elements draggable , resizeable. aline horizontally. problem when attempted resize first element @ top, second element position below automatically cover first element.

below style:

<style>     #request-grid { width: 500px; min-height: 200px; margin: 10px; padding: 0.5em;}     #bb-clist { width: 500px; min-height: 200px; margin: 10px; padding: 0.5em;}     .ui-resizable-helper { border: 2px dotted #00f; } </style> 

below jqueryui code:

$( "#request-grid" ).draggable({containment: "#content", scroll: true, stack: "#content div" }); $( "#bb-clist" ).draggable({containment: "#content", scroll:true, stack: "#content div"});  $( "#request-grid" ).resizable({ helper: "ui-resizable-helper",  containment: "#content" });  $( "#bb-clist" ).resizable({ helper: "ui-resizable-helper", containment: "#content" }); 

below html element:

<div id="request-grid" class="ui-widget-content"> </div>  <div id="bb-clist" class="ui-widget-content"> </div> 

how solve problem without other element covering/overlapping other element when resizing.

thanks.

html

<div>     <div id="request-grid"></div>     <br/>     <div id="bb-clist"></div> </div> 

css

#request-grid {     height:100px;     width: 200px;     min-height: 100px;     margin: 10px;     padding: 0.5em;     background-color:pink; } #bb-clist {     height:100px;     width: 200px;     min-height: 100px;     margin: 10px;     padding: 0.5em;     background-color:blue; } .ui-resizable-helper {     border: 2px dotted #00f; } 

jquery

$(document).ready(function () {      $("#request-grid").draggable({         containment: "#document",         scroll: false,         stack: "#content div"     });     $("#bb-clist").draggable({         containment: "#document",         scroll: false,         stack: "#content div"     });      $("#request-grid").resizable({         helper: "ui-resizable-helper",         containment: "document",         resize: function (event, ui) {             var height = (ui.size.height + 'px');             $('#bb-clist').css('posotion', 'absolute').css('top', height);         },         stop: function (event, ui) {             var h2 = (ui.size.height);             if (h2 < 200) {                 h2 = 100; // set default min-height if re-sized less min-height.             }             $('#bb-clist').css('posotion', 'absolute').css('top', h2);         }      });      $("#bb-clist").resizable({         helper: "ui-resizable-helper",         containment: "document"     }); }); 

working demo http://jsfiddle.net/cse_tushar/qkkv6/