jquery re-sizable moves other elements inside scroll-able div

I know a similar question has been asked, But hear me out, I have an additional specification that's stumping me:
So as the title mentions it, I have a div that you can scroll in:

<td>


div1

div2

</div>
</td>

And here is the CSS for the "forCanvas" and "dropZone" and "Type1" classes:

CSS

.forCanvas {
height: 600px;
width: 500px;
overflow: hidden;
overflow-y: scroll;
overflow-x: scroll;
}

.dropZone {
width: 620px;
height: 877px;
padding: 0;
/*float: left;*/
margin: 0;
background: #fff;
}

.Type1 {
width: 200px;
height: 25px;
background: grey;
box-sizing: content-box;
position:relative;
}

.Type1 h3 {
text-align: center;
margin: 0;
font-size: 15px;
color: red;
background: grey;
border: none;
position:absolute;
}


The remaining classes are from jquery-ui and i ddnt do them:

jquery-ui

.ui-widget-content {
border: 1px solid #dddddd;
background: #ffffff;
color: #333333;
position: absolute;
}

.ui-widget-header {
border: 1px solid #dddddd;
background: #e9e9e9;
color: #333333;
font-weight: bold;
}


Now u can see that I'm forced to set the position of Type1 to relative and the header to absolute, but that will affect the resizing of jQuery...

$(".Type1")
.draggable({
grid: [20, 20], //make the object move in a grid of squares of (20 px)
snap: true, //make the object snap to other draggable objects
snapTolerance: 30 //make the snap radius 30 px
})
.resizable({
grid: [20, 20], //make the object resize in a grid of squares (20px)
animate: true, //make the objet expand with an animation
handles: 'all', //make the object expand in all directions
ghost: true //make the object have an expansion ghost untill the mouse is released
});


I know that setting it to absolute would fix the resizing problem, but I need it to be relative so that the object stays "on the canvas" when I scroll...

Can any one help me with a work around?

THANK YOU!

EDIT: I would also like to add that only elements that have been placed earlier affect newer elements, so I tried to change the z-index of the element I'm resizing to 9999, but it still did not work :/

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.