Need to keep the tabs on the page - always on the front of the page

Question

Need to keep the tabs on the page - always on the front of the page. If you click on the one, two it is fine but when you click Three the page scrolling comes above the tabs. How can I retain the tabs on the front please?

Here is my jsfiddle link http://jsfiddle.net/97tbk/737/

Here is the code

<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

You need to add a z-index to your unordered list. Try this:

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

I can't test this snippet now, but I'm pretty sure that it works.

Answer 2

You can use "z-index" property for this. You must use always with "position: relative" or it won't work.

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

Here is the fiddle: http://jsfiddle.net/97tbk/740/