동일한 양식 (z- 색인) 관련 jquery-ui 자동 완성 및 슬라이더에 문제가 있습니다

Question

jQuery UI 라이브러리를 사용하여 웹 페이지를 만들려고합니다. 내 디자인은 폼의 맨 위에있는 입력 필드에서 jQuery UI 자동 완성을 사용합니다. 이 자동 완성 입력 폼 바로 아래에 jQuery 슬라이더가 있습니다. 문제는 자동 완성 상자가 채워지면 결과가 슬라이더 컨트롤의 핸들 뒤에 표시된다는 것입니다. 이것은 jQuery가 슬라이더를 만들어서 Z- 인덱스가 3 인 슬라이더를 만드는 방식에서 비롯됩니다. jquery 자동 완성 컨트롤의 드롭 다운 부분의 z- 인덱스는 항상 1로 설정되어있는 것처럼 보입니다. z 자동 완성되고 있지만 효과가없는 입력 요소의 색인 jquery 요소의 z- 색인이 자동 완성 드롭 다운을 만듭니다. 나는 또한 클래스 (그것은 ul)에 의해 메뉴 요소를 드롭 다운하고 수동으로 Z- 인덱스를 설정하기 위해 내 자신의 자바 스크립트를 작성하려했다. 이것은 작동하지 않는 것 같습니다. 나는 이것이 어떻게 든 jQuery 코드가 내가 만들고있는 z- 인덱스 변경 사항을 덮어 쓰는 것을 의미한다고 가정하고있다. 이것은 Firefox, Chrome, Safari 및 IE에서 문제가되는 브라우저 버그가 아닙니다. 실제 z- 인덱스 jQuery의 문제는 드롭 다운 상자 (UL 요소)를 제공합니다.

누구에게이 문제의 해결책이 있습니까? 일반적으로 jQuery가 컨트롤을 만들기 위해 자동으로 생성하는 요소를 어떻게 만지작 거리는가? Z- 인덱스를 수정하기 위해 열고 닫는 이벤트를 사용

Answer 1

은 나를 위해 일한 :

$("#tags").autocomplete({ 
    source: availableTags,  
    open: function(event, ui) { $(".ui-slider-handle").css("z-index", -1); }, 
    close: function(event, ui) { $(".ui-slider-handle").css("z-index", 2); } 
}); 

데모 here를 참조하십시오.

Answer 2

http://bugs.jqueryui.com/ticket/5238에 따르면 2 가지 해결책이있는 것으로 보입니다.

"Z- 색인을 3으로 변경하면이 문제를 완전히 해결 한 것 같습니다." ! "중요한"당신은 당신의 CSS에서이 작업을 수행 할 수 있습니다

, 당신은 단지 값을 라이브러리 세트를 오버라이드 (override)에 추가해야합니다

ul.ui-autocomplete { 
    z-index: 3 !important; 
} 

또는 "설정 위치 : 자동 완성 입력에 상대를하도록. zIndex()는 실제로 z- 인덱스를 계산할 수 있습니다. "