Absolute positioning inside relative positioned div still does not stay in place

Question

I'm using jquery ui resizeable on a scrollable list. The jquery part worked well but the "grip" to resize it scrolls along with the list instead of staying positioned absolutely to the list even though the parent is already relative positioned.

I'm not sure what's wrong with the CSS.

Made a fiddle to illustrate: http://jsfiddle.net/2pg7r/

Would appreciate any help or hints!

$( "#unlNotification" ).resizable();

<div id="container">
    <ul id="unlNotification"style="height: 127.7px;">
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        ...
    </ul>
</div>

.ui-icon {
    background-color: black;
    width: 20px;
    height: 20px;
}
#container, .ui-resizable {
    position: relative;
}
.ui-resizable {
    overflow: auto;
}
ul, li {
    list-style: none outside none;
}

.ui-resizable-se {
    bottom: 1px;
    cursor: se-resize;
    height: 12px;
    right: 1px;
    width: 12px;
    position: absolute;
}

Edit: Thanks everyone for your help! I realized what i did wrong by looking at both your codes and amended them to include the query part: http://jsfiddle.net/2pg7r/4/ in case anyone needs to use it like that.

I can only pick one as the correct answer so I'll just pick the first one since it's both the same (Sorry!) But thank you!

Answer 1

I placed div outside of ul and moved .ui.resizable-se 20px from right. Is this what you want?

<ul id="unlNotification"style="height: 127.7px;">
    <li>qwe</li>
    <li>qwe</li>
    <li>qwe</li>
    ...
</ul>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>

css

.ui-resizable-se {
    right: 20px;
}

jsfiddle

Answer 2

it will help you

http://jsfiddle.net/2pg7r/3/

#container {
    position: relative;
}

.ui-resizable-se {
    bottom: 1px;
    cursor: se-resize;
    height: 12px;
    right: 1px;
    width: 12px;
    position: absolute;
    right:20px;
}