Question

![enter image description here][1]On my two demo and screenshot, you can understand that so far I got it working, but I need a bit of more help. The tab 3 needs to be in z-index, and the tab 2 should be just be on top of the content number 2.
I hope it’s easy to understand.

http://jsfiddle.net/QxgDr/2/

or better example the nav in position absolute:

http://jsfiddle.net/QxgDr/12/

Answer 1

I’m afraid z-index will only work consistently between siblings, not cousins. The tabs should be siblings of the pages to achieve that. You can make the pages themselves part of the <li>‘s as well, which while solving the problem would also improve semantics. Then you should only handle <li>‘s z-index and profit!

EDIT:

<ul id="tabs">
    <li id="tab_1">
        <figure><img alt="..."></figure>
        <article>...</article>
    </li>    
    <li id="tab_2">
        <figure><img alt="..."></figure>
        <article>...</article>
    </li>
    <li id="tab_3">
        <figure><img alt="..."></figure>
        <article>...</article>
    </li>
</ul>

From here just position the figures where you like (you can even add z-index:1 to have them stack over the <articles>), and work with the <li>‘s as you did with the tabs.