在相對定位的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;
}