È necessario mantenere le schede sulla pagina, sempre nella parte anteriore della pagina

Question

È necessario mantenere le schede sulla pagina, sempre nella parte anteriore della pagina. Se si fa clic su uno, due va bene ma quando si fa clic su Tre lo scorrimento della pagina arriva sopra le schede. Come posso mantenere le linguette sulla parte anteriore per favore?

Ecco il mio link jsfiddle http://jsfiddle.net/97tbk/737/

Ecco il codice

<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

È necessario aggiungere un z-index alla tua lista non ordinata. Prova questo:

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

Non riesco a testare questo snippet ora, ma sono abbastanza sicuro che funzioni.

Answer 2

È possibile utilizzare la proprietà "z-index" per questo. È necessario utilizzare sempre con "position: relative" o non funzionerà.

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

Ecco il violino: http://jsfiddle.net/97tbk/740/