내 H1을 jQuery 슬라이드 쇼 위에 놓기

Question

슬라이드 쇼를 만들고 슬라이드 쇼 위에 머리글 텍스트를 유지하는 방법을 모르겠습니다. 여기 내 코드가있다.

HTML

<h1>Baltimore Maryland</h1> 
    <img src="images/Baltimore_Main-1.jpg" /> 
    <img src="images/Row-Baltimore-top.jpg" /> 
    <img src="images/bmoreBoat.jpg" /> 

    </div> 

jQuery를

$('#header').cycle(); 

내가 헤더의 내 ID를 대상으로하기 때문에 내 사진 내 H1을 껐다 압니다. 나는 Z-index를 시도했으나 http://malsup.com/jquery/cycle/lite/ 플러그인이 내가 지정한 Z- 인덱스를 덮어 쓰기 때문에 작동하지 않습니다. 나는 내 이미지 주위에 div 퍼팅 시도하고이 $ ('# header div') 같은 대상으로 div 추가. cycle(); 그리고 그것은 작동하지 않습니다. div를 내 머리글 위에 올려 놓거나 결함을 망친다. 그것은 내 div와 h1을 비틀 거린다. h1을 내 슬라이드 쇼 위에 올려 놓으려면 어떻게해야합니까?

Answer 1

래핑 div (헤더라는 이름의 헤더) 내부에 H1 태그를 넣지 않아도 해당 div 외부에 놓을 수 있고 CSS로 문제를 해결할 수 있습니다. 절대적으로 만들 수 있으며 상단과 왼쪽을 현실적인 포장지. 이 같은 :

<div class="relative_wrapper" style="position: relative;"> 
<h1 style="display: block; position: absolute; top: -15px; left: -15px; z-index:900;">Baltimore   Maryland</h1> 
<div id="header"> 
    <img src="images/Baltimore_Main-1.jpg" /> 
    <img src="images/Row-Baltimore-top.jpg" /> 
    <img src="images/bmoreBoat.jpg" /> 
</div> 
</div>