javascript - 相对定位的div内的绝对定位仍未保持在原位

我正在使用可滚动列表上可调整大小的jQuery UI。 jQuery部分工作得很好，但是用于调整其大小的“抓握”部分将与列表一起滚动，而不是即使父对象已经相对定位，也不会绝对地保持在列表的位置。

我不确定CSS有什么问题。

摆弄一个小提琴来说明：http://jsfiddle.net/2pg7r/

将不胜感激任何帮助或提示！

$( "#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;
}

编辑：谢谢大家的帮助！通过查看您的两个代码，我意识到我做错了什么，并将它们修改为包括查询部分：http://jsfiddle.net/2pg7r/4/，以防有人需要使用它。

我只能选择一个作为正确的答案，所以我只选择第一个，因为它们都相同（对不起！）但是谢谢！

最佳答案

我将div放在ul之外，并将.ui.resizable-se从右边移了20px。这是你想要的吗？

<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

关于javascript - 相对定位的div内的绝对定位仍未保持在原位，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20192719/