Jqueryui redimensionnable. Le curseur arrive au premier plan à travers d'autres éléments

Question

J'ai un conteneur redimensionnable. Dans ce conteneur j'ai une liste dans un div. La liste est plus grande que le conteneur, donc il sort à l'extérieur. Mon problème est le suivant: lorsque je survole un élément de la liste, si mon curseur se trouve à la hauteur de la bordure du conteneur, le curseur change et il est possible de redimensionner le conteneur.

Voici une démonstration http://jsfiddle.net/TCHdevlp/9B3YZ/

La seule chose fait est un simple $("#main").resizable({ handles :'s' });

vol stationnaire juste les différentes lignes de la liste pour le changement du curseur.

Comment est-ce possible? Ma liste est dans un div avec un index z spécifique de '2' pour être au premier plan. C'est comme si le conteneur d'arrière-plan arrivait au premier plan dans ma liste.

Answer 1

Il ressemble à un style en ligne z-index:1000; est en cours d'application à .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; 
} 

Working Example

Answer 2

Il est parce que le gestionnaire interface utilisateur redimensionnable jQuery définir un z-index de 1000 sur l'élément.

Vous pouvez définir un z-index plus élevé comme 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; 
} 

violon de travail. http://jsfiddle.net/9B3YZ/3/