html - jquery-ui, draggable item : does'nt work when position is absolute -

i'm trying make draggable items contained in position:absolute div. works when dragged on div declared earlier in code, item never appear on [position:absolute] div declared later in code, when setting lower z-index div...

here's example

$(function(){  			$(".myclass").draggable({stack:".bg"});  		}(jquery));

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>    <div style="position:absolute;background-color:#3ff;width:200px;height:200px;border:1px solid #000;left:0px;top:0px;z-index:10;">  	<div class="myclass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0f6;border:1px solid #000;z-index:100;">draggable</div>  </div>  <div style="position:absolute;background-color:#ffc;width:200px;height:200px;border:1px solid #000;left:205px;top:0px;z-index:10;">  	<div class="myclass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0f6;border:1px solid #000;z-index:100;">draggable</div>  </div>  <div style="position:absolute;background-color:#9cf;width:200px;height:200px;border:1px solid #000;left:205px;top:205px;z-index:10;"></div>

any idea of how solve issue ?

thx.

the problem z-index on parents elements. 1 easy way resolve problem remove them. or can manipulate them on start , stop draggable parent @ top. see here manipulating on start , stop, removing html should work.

$(function() {    $(".myclass").draggable({      stack: ".myclass",      start: function(e, ui) {        ui.helper.parent().css('z-index', 30);      },      stop: function(e, ui){        ui.helper.parent().css('z-index', 10);        }    });  }(jquery));

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>    <div style="position:absolute;background-color:#3ff;width:200px;height:200px;border:1px solid #000;left:0px;top:0px;z-index: 10;">    <div class="myclass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0f6;border:1px solid #000;z-index:100;">draggable</div>  </div>  <div style="position:absolute;background-color:#ffc;width:200px;height:200px;border:1px solid #000;left:205px;top:0px;z-index: 10;">    <div class="myclass" style="position:absolute;left:10px;top:10px;width:70px;height:70px;background-color:#0f6;border:1px solid #000;z-index:100;">draggable</div>  </div>  <div style="position:absolute;background-color:#9cf;width:200px;height:200px;border:1px solid #000;left:205px;top:205px;z-indx: 10;"></div>