絕對定位裏面的相對定位的div仍然不能保持原位

我正在使用jQuery UI調整可滾動列表上的大小。 jquery部分運行良好，但調整大小的「抓地力」與列表一起滾動，而不是保持絕對位置，即使父級已經相對定位。絕對定位裏面的相對定位的div仍然不能保持原位

我不確定CSS有什麼問題。

希望得到任何幫助或提示！

$("#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/以防萬一任何人需要使用它。

我只能選擇一個作爲正確的答案，所以我會選擇第一個，因爲它們都是相同的（對不起！）但是，謝謝！

來源

2013-11-25 eruina

首先，這不是一個有效的HTML結構，DIV笑他不是一個直接的孩子。 http://stackoverflow.com/questions/8557869/is-this-html-structure-valid-ul-div-li-li-div-li-li-div –

我複製了錯誤的代碼抱歉。但是當初始化可調整大小時，div將被jquery-ui自動添加。 – eruina

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

來源

2013-11-25 12:24:56

它會幫助你

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

來源

2013-11-25 13:54:11

絕對定位裏面的相對定位的div仍然不能保持原位

回答

相關問題