resizable缩放多个同级DIV元素，其他元素被挤下去问题

Question

你期待的结果是什么？实际看到的错误信息又是什么？

我要在父元素中拖动大小，不能超出父元素，resizable缩放第一个元素时，其他的元素总会被挤下去，把最后一个元素拖动到其他地方，缩放时又会跑到最下去，而且，缩放到最大不能占满父元素，我想要的是，不管拖动放大缩小哪个元素都可以把其他元素浮动在最上层覆盖，缩放到最大。
原图：
拖动缩放后：

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<style>
.div-rows-col{    
width: 55%;
height: 500px;
margin-left: 400px;    
background-color: gray;    
position: relative; 
}
.row{    
width: 100%;    
margin-left: 0px;    
margin-right: 0px;    
z-index: 10;    
position: absolute;
}
</style>
    <div class="div-rows-col">
        <div class="row" id="div5" style="display:block;">
                <div class="col-xs-6 col-md-4 nav-lon" id="five" style="background: red;"></div>
                <div class="col-xs-6 col-md-4 nav-lon" id="five" style="background: yellow;"></div>
                <div class="col-xs-6 col-md-4 nav-lon" id="five" style="background: #000"></div>
                <div class="col-xs-6 col-sm-4 nav-lon" id="five" style="background: green;"></div>
                <div class="col-xs-6 col-sm-4 nav-lon" id="five" style="background: blue;"></div>
                <div class="col-xs-6 col-sm-4 nav-lon" id="five" style="background: #FFFFFF"></div>
                <div class="col-xs-6 col-sm-4 nav-lon" id="five" style="background: silver;"></div>
                <div class="col-xs-6 col-sm-4 nav-lon" id="five" style="background: orange;"></div>
                <div class="col-xs-6 col-sm-4 nav-lon" id="five" style="background: scrollbar;"></div>
        </div>
    </div>
<script type="text/javascript">
                $(document).ready(function(){    
                            $(function () {    //预案拖动缩放    
                                            $(".nav-lon").draggable({    
                                                            containment : ".div-rows-col",    
                                                            zIndex:1000
                                            });    
                                            $(".nav-lon").resizable({    
                                                            containment: '.div-rows-col'    
                                            });
                                });    
                    });    
</script>