jquery - Jqueryui 可调整大小。光标通过其他元素进入前台

Question

我有一个可调整大小的容器。在这个容器中，我在 div 中有一个列表。该列表比容器大，因此它在外面。我的问题是，当我悬停列表的一个元素时，如果我的光标位于容器边框的高度，光标会发生变化，我可以调整容器的大小。

这是一个演示http://jsfiddle.net/TCHdevlp/9B3YZ/

唯一要做的就是一个简单的$("#main").resizable({ handles :'s' });

只需将鼠标悬停在列表的不同行上即可查看光标的变化。

这怎么可能 ？我的列表在一个 div 中，其特定的 z-index 为“2”，位于前台。就像背景容器在我的列表中出现在前台一样。

Answer 1

看起来内联样式z-index:1000;正在应用于.ui-resizable-s.

.divAmUl{
    position: relative;
    padding:0;
    margin:0;
    width:100px;
    z-index:1001;  /* changed z-index */
    border:1px solid #a6c9e2;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color:white;
 }

工作示例

Answer 2

这是因为可调整大小的 jQuery UI 处理程序z-index在元素上设置了 1000。

您可以设置更高的 z-index，例如 2000：

 .divAmUl{
    position: relative;
    padding:0;
    margin:0;
    width:100px;
    z-index:2000;
    border:1px solid #a6c9e2;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color:white;
 }

工作小提琴：http: //jsfiddle.net/9B3YZ/3/