jQuery resizable forces top of the element to be >=0

Question

I have a problem with jQuery resizable.

Have a look at this JSFiddle. Even though containment is set to #outerContainer, when I try to drag the child (the blue box) by either its lower or upper handle, its top position is forced to be 0, even though it is well within the bounds of the red box.

Any clues?

Here's the code, just in case:

HTML

<div id='outerContainer'>
    <div id='margin'></div>
    <div id='parent'>
        <div id='child'></div>
    </div>
</div>

CSS

#outerContainer {
    position:relative;
    border: 1px solid red;
}

#margin {
    height:25px;
}

#parent {
    position: relative;
    width: 50px;
    height: 200px;
    border: 1px solid black;
}

#child {
    position: absolute;
    top: -20px;
    width:40px;
    height:50px;
    border: 1px solid blue;
}

JS

$('#child').resizable({handles: 'n, s', containment: '#outerContainer', grid: [10, 10]});

Answer 1

In CSS, top: -20px is considered an offset value, which is why you must relate it to another element to be able to use it (aka position: relative / absolute / fixed)

When you click the resize on its upper border, it has to revert its top value to give you a chance to adjust it. You aren't changing the element's width or height with that resize, you're moving it to a new position.

Long story short, use margin-top instead of top and you're golden.

#child {
    position: absolute;
    margin-top: -20px;
}

Demo Fiddler