在相对定位的div内的绝对定位仍然不会保持在原位

Question

我在可滚动列表上使用jquery ui resizeable。 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/以防任何人需要像这样使用它。

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

Answer 1

我把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

Answer 2

它会帮助你

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;
}