Konieczność trzymania zakładek na stronie - zawsze z przodu strony.

Question

Potrzebujesz zachować zakładki na stronie - zawsze z przodu strony. Po kliknięciu jednego, dwa są w porządku, ale po kliknięciu przycisku Trzy przewijanie strony znajduje się nad kartami. Jak mogę zachować zakładki z przodu?

Oto moja jsfiddle Link http://jsfiddle.net/97tbk/737/

Oto kod

<div id="tabs"> 
    <ul> 
     <li><a href="#fragment-1"><span>One</span></a></li> 
     <li><a href="#fragment-2"><span>Two</span></a></li> 
     <li><a href="#fullpage"><span>Three</span></a></li> 
    </ul> 

    <div id="fragment-1"> 
     <p>First tab is active by default:</p> 
     <pre><code>$("#tabs").tabs(); </code></pre> 
    </div> 

    <div id="fragment-2"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    </div> 

    <div id="fullpage"> 
     <div class="section">One</div> 
     <div class="section"> 
      <div class="slide">Two 1</div> 
      <div class="slide">Two 2</div> 
     </div> 
     <div class="section">Three</div> 
     <div class="section">Four</div> 
    </div> 
</div> 

Answer 1

Trzeba dodać z-index do nieuporządkowanej listy. Wypróbuj to:

ul { 
    z-index: 9999; 
    position: relative; 
} 

Nie mogę teraz przetestować tego fragmentu, ale jestem pewien, że to działa.

Answer 2

Do tego celu można użyć właściwości "z-index". Musisz zawsze używać "position: relative" lub nie będzie działać.

#tabs ul { 
    position: relative; 
    z-index: 99; 
} 

Oto skrzypce: http://jsfiddle.net/97tbk/740/