Jquery选项卡和导航z-index定位

Question

！[在此处输入图像说明] [1]在我的两个演示和截图中，您可以理解到目前为止我已经开始工作，但我需要一些帮助。标签 3 需要位于z-index中，标签 2 应该位于内容编号2之上。 我希望这很容易理解。

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

或更好的例子，导航位置绝对：

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

Answer 1

我害怕z-index只会在兄弟姐妹之间保持一致，而不是表兄弟。选项卡应该是页面的兄弟，以实现这一点。您可以将页面本身作为<li>的一部分，在解决问题的同时也可以改善语义。那么你应该只处理<li>＆＃39; z-index并获利！

编辑：

<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>

从这里开始，只需将figures置于您喜欢的位置（您甚至可以添加z-index:1让它们叠加在<articles>上），然后使用<li>＆＃ 39; s就像你对选项卡所做的那样。