javascript - jquery dynamic positioning -

i have dynamic textarea nested within div. div resizable , draggable. have created delete icon div want delete icon in ne corner of div , move when div resized.

i have created div, textarea , icon code

    function newtextarea(id)     {         id=id+i;     var newdiv = document.createelement('div');     newdiv.setattribute('id', id);     newdiv.setattribute('class', 'dragbox');     newdiv.setattribute('iterate',i);     newdiv.style.position = "relative";     newdiv.style.top = p;     newdiv.style.left = p;     newdiv.style.cursor='move';     newdiv.innerhtml = "</div><br><textarea id='"+i +"'  ondblclick='editor1("+i+")' name='textarea["+i +"]' class='textarea1' style='position:absolute; top:10px;left:0px;overflow-y: auto;background-color:transparent;border: 2px dashed #000; '>some text here"+i+"</textarea>";     newdiv.innerhtml=newdiv.innerhtml+"<br><input type='hidden' value='"+i+"' name='id["+i+"]'><br><input name='box_type["+i+"]' type='hidden' value='text'/>";      newdiv.innerhtml=newdiv.innerhtml+"<br><input type='hidden' value='300' name='width["+i+"]' id='width"+i+"'><br><input type='hidden' value='300' name='height["+i+"]' id='height"+i+"'>";                    newdiv.innerhtml=newdiv.innerhtml+"<br><input type='hidden' value='0' name='left["+i+"]' id='left"+i+"'><br><input type='hidden' value='0' name='top["+i+"]' id='top"+i+"'>";       document.getelementbyid("frmmain").appendchild(newdiv);       var but=document.createelement('input');     but.setattribute('type','button');     but.setattribute('class','removebutton');             but.onclick=function(){         if(confirm('really delete?'))         {         document.getelementbyid("frmmain").removechild(newdiv);         document.getelementbyid(id).removechild(but);         document.getelementbyid(id).removechild(newbr);         }            }      newbr=document.createelement('br');     document.getelementbyid(id).appendchild(newbr);     document.getelementbyid(id).appendchild(but);        $(function()     {         $("#"+i).resizable({autohide:true})         $("#"+id).hover(function () {             $("#"+i).css('border', '2px dashed #000');                  });         $("#"+id).mouseleave(function () {             $("#"+i).css('border', '0px dashed #000');                  });         $("#"+i).resizable(             {                 stop: function(event, ui)                 {                     var width = ui.size.width;                     var height = ui.size.height;                     // alert("width="+width+"height="+height);                     valproportions(width,height,ui.element.context.id);                            }             });          $( "#"+id ).draggable(             {                 stop: function(event, ui)                 {                     stoppos = $(this).position();                     $("div#stop").text("stop: \nleft: "+ stoppos.left + "\ntop: " + stoppos.top);                     // alert("left="+stoppos.left+"top="+stoppos.top);                     valpostion(stoppos.left,stoppos.top,$(this).attr('iterate'));                    }             });          $("#"+i).draggable({handle:"#handle"});      });        function valproportions(defaultwidth, defaultheight,id)  {          $('#width'+id).val(defaultwidth);         $('#height'+id).val(defaultheight);     }     function valpostion(defaultleft,defaulttop,id)  {           $('#left'+id).val(defaultleft);         $('#top'+id).val(defaulttop);     }      p=p+25;          i++; 

use style on button.

float:right 

will put button right of div. make sure got button first element inside div.