2013-04-30 6 views
1

bxslider의 내용을 no-child 요소로 주문해야합니다. 이미지와 맨 위에있는 텍스트 사이.bxslider의 z- 인덱스 요소 순서

예컨대

<div> 
<ul id="slider"> 
<li><img src="image1.jpg" /><span>text</span></li> 
</ul> 
<div class="under-text-over-image"></div> 
</div> 

사람이 Z- 인덱스에 대한 조언을 수 있을까요? 내가의 라인을 따라 뭔가 시도 할 것이다

+0

"모든 것을 시도한 것 같습니다."그래서 무엇을 시도 했습니까? –

+0

질문 텍스트를 참조하십시오 –

+0

부모 위치가 있습니까? position : relative? –

답변

0

li img{ 
position:relative; 
z-index:1; 
} 
li span{ 
position:relative; 
z-index:3; 
} 
.under-text-over-image{ 
position:relative; 
z-index:2; 
} 

감사 :이 라인을 따라

li img{ 
position:relative; 
z-index:-99999; 
} 

li span{ 
position:relative; 
z-index:99999; 
} 

.under-text-over-image{ 
position:relative; 
z-index:11111; 
} 

뭔가를 사용할 때 일반적으로 나를 위해 작동,

기존 CSS는 비슷합니다 Z- 색인.

희망이 도움이됩니다.

0

내 늦게 답장 ... BXSlider는 JS 내에서 zIndexing하고 있습니다 (여기에 더 많은 것을 읽으십시오 : http://bxslider.com/docs/jquery.bxslider.html). 모든 슬라이드에서 깜박 거리는 것을 발견 한 가장 좋은 방법은 콘텐츠가 어떤 방향으로 표시 되든 <ul> 내 콘텐츠를 다른 <div> 안에 중첩하는 것입니다. 내 실험에서 이것은 눈에 보이지 않는 또는 보이지 않는 레이어의 재주문을 방해하지 않는 것 같습니다.

여기에 슬라이드에 대한 예입니다 :

<ul class="bxslider"> 
<li> 
    <div style="position:absolute;z-index:88888;"> 
     ... this content will be above everything else ... 
    </div> 
</li> 
    <li> 
    <div style="position:absolute;z-index:88888;"> 
     ... this content will be also be above ... 
    </div> 
</li> 
</ul> 

참고 : Z- 인덱스는 전혀 작동하는 위치 선언을 필요로한다.

0

이 질문은 오래된 질문이지만 문제는 꽤 많이 보입니다. 당신은 당신이거야 이렇게되면

당신이 가장 가능성이 이미지 파일

bx-wrapper .bx-prev { 
    left: 10px; 
    background: url(images/controls.png) no-repeat 0 -32px; 
} 

에게 빠른 검사

.bx-wrapper .bx-controls-direction a { 
    background-color: blue; 
} 

을 놓치고 : 문제는 Z-인덱싱되지 않습니다 컨트롤이 있는지 확인하십시오.