I have a code with some resizable divs which are positioned absolute in another div container that is positioned related. These divs have top specified to Y. When I start resizing these divs, they simply jump up; this behaviour doesn’t happen if divs are around the middle of the screen.
#container {
width: 500px;
height: 500px;
overflow: scroll;
vertical-align:top;
position: relative;
}
.myDiv {
width: 200px;
margin: 0px;
height: 30px;
position: absolute;
z-index: 500;
background-color: blue;
border: 1px solid red;
top: 300px;
left: 20px;
}
<div id='container'>
<div class='myDiv'></div>
<div class='myDiv' style="top: 550px;"></div>
<div style="height:600px;" id="forcedHeight"></div>
</div>
$('.myDiv').resizable();
However, when I disable the overflow of the container, resizing works perfectly; it is only when the container scroll the overflow that the div do this weird behavior. Any idea?
Thanks