I'm not sure if I understand your question.
But there is a Fiddle.
I've change only your css
.
Question
I have 3 divs. One inside the other.
jQuery
$(function() {
$("#div1").resizable({
handles: "n, e, s, w, nw, ne, sw,se"
});
$("#div1").draggable();
});
HTML
<div id="div1" style="left: 2px; top: 2px; z-index: 2; width: 100px; height: 70px; background-color: black">
<div id="div2" style="width: 100%; height: 100%; background-color: green; position: absolute;">
<div id="div3" style="width: 90px; height: 60px; position: relative; top: 50%; margin: -30px auto auto; border: 1px dashed rgb(0, 0, 0);">
text
</div>
</div>
</div>
CSS
.ui-resizable-handle { width: 10px; height: 10px; background-color: #ffffff; border: 1px solid #000000; }
.ui-resizable-n { top: 1px; left: 50%; }
.ui-resizable-e { right: 1px; top: 50%; }
.ui-resizable-s { bottom: 1px; left: 50%; }
.ui-resizable-w { left: 1px; top: 50%; }
.ui-resizable-nw { left: 1px; top: 1px; }
.ui-resizable-ne { top: 1px; right: 1px; }
.ui-resizable-sw { bottom: 1px; left: 1px; }
As you can see the div1 is resizable,draggable and has absolute width and height. Div2 has 100% width and height and has absolute position. Div3 has the parameters to be centered horizontally and vertically.
I have a screenshot of what i want to do. I want the white handles to be outside the div like shown in the screenshot. The second div must stay with position:absolute. There is also a jsfiddle that contains my current code.
Please help me move the handles outside of the div.
Solution
OTHER TIPS
You need to move the handle's by more than you have in the css
you've outlined. I've tidied it up a bit and you can see that here
.ui-resizable-handle {
width: 10px;
height: 10px;
background-color: #ffffff;
border: 1px solid #000000;
}
.ui-resizable-n, .ui-resizable-s {
left:50%;
}
.ui-resizable-e, .ui-resizable-w {
top:50%;
}
.ui-resizable-se {
right: -5px;
bottom: -5px;
}