올빼미 회전 목마 탐색 숨기기

Question

올빼미 회전 목마를 사용하고 쉽게 탐색 할 수 있도록 슬라이드 위의 탐색을 원합니다. 이제 그들은 숨겨 지거나 슬라이더 아래에 있습니다. 나는 그들을 위에 올려 놓는 방법을 모른다. 컨베이어와 탐색을 위해 CSS에서 Z- 색인을 시도했지만 아무 일도 일어나지 않습니다. 감사합니다 도움이 필요하십니까! 당신이 텐데처럼

JS

#owl-demo2 .item img{ 
    display: block; 
    width: 100%; 
    height: auto; 
    position: relative; 
    z-index: 1; 
    } 
    .owl-theme .owl-controls .owl-buttons div{ 
    color: #FFF; 
    display: inline-block; 
    zoom: 1; 
    position: fixed; 
    z-index: 2000; 
    *display: inline;/*IE7 life-saver */ 
    margin: 90px; 
    padding: 20px 0px; 
    font-size: 12px; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
    background: #869791; 
    filter: Alpha(Opacity=50);/*IE7 fix*/ 
    opacity: 0.5; 
} 
.owl-buttons { 
    position: absolute !important; 
    top: -45px !important; 
    left: 50% !important; 
    transform: translateX(-50%)!important; 
} 

Answer 1

z-index

<script> 
$(document).ready(function() { 
    $("#owl-demo2").owlCarousel({ 
     navigation : true, // Show next and prev buttons 
     slideSpeed : 300, 
     paginationSpeed : 400, 
     items : 1, 
     itemsDesktop : false, 
     itemsDesktopSmall : false, 
     itemsTablet: false, 
     itemsMobile : false 
     }); 

    }); 
</script> 

CSS 항목을 넣어하지 않습니다. 나는 당신이 다른 z-index을 설정하는 것보다이 버튼들의 위치를 ​​바꿀 필요가 있다고 생각한다.

여기에 z-index의 작동 방식에 대한 예가 있습니다. 당신이 원하는대로 z-index을 변경하고이 상자에 alignement 작업 방법 확인 : 당신은 당신의 솔루션이 CSS를 시도 할 수 있습니다

https://jsfiddle.net/grmcfb7z/

가 :

.owl-buttons{ 
    position: absolute; 
    top: -45px; 
    left: 50%; 
    transform: translateX(-50%); 
} 

당신이 그것을 아무튼 경우를 조정할 할 수 있습니다 ' 당신이 바라는 것처럼 보지 마라. 나는 그 의견에서 당신의 모범을 시험해 보았고 나에게 위대해 보였다.

UPDATE

정확한 문제에 파고 후, 여기에 전체 솔루션입니다 :

#owl-demo2 .item img { 
    display: block; 
    width: 100%; 
    height: auto; //we don't need position or z-index property here 
} 

.owl-theme .owl-controls .owl-buttons div { 
    color: #FFF; 
    display: inline-block; 
    zoom: 1; 
    *display: inline; /*IE7 life-saver */ 
    margin: 10px; //fixed margin to not mess our buttons alignement 
    padding: 5px 15px; //smaller padding for better look 
    font-size: 12px; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
    background: #869791; 
    filter: Alpha(Opacity=50); /*IE7 fix*/ 
    opacity: 0.5; 
} 

.owl-buttons, .owl-pagination { 
    position: absolute !important; 
    left: 50% !important; 
    transform: translateX(-50%) !important; //here we override our buttons 
              //positions 
} 

.owl-buttons { 
    top: 0 !important; //nav position 
} 

.owl-pagination { 
    bottom: 0 !important; //pagination position 
} 

근무 jsfiddle : https://jsfiddle.net/43wo7g98/3/