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

Question

![在此处输入图像描述][1]在我的两个演示和屏幕截图中，您可以理解到目前为止我已经成功了，但我需要更多帮助。tab 3需要在 z-index 中，tab 2应该刚好在 content number 2 的上面。希望容易理解。

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

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

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

Answer 1

恐怕z-index只会在兄弟姐妹之间工作，而不是堂兄弟。选项卡应该是页面的兄弟姐妹来实现这一点。您也可以使页面本身成为<li>'s 的一部分，这在解决问题的同时还可以改善语义。那么你应该只处理<li>'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>像处理制表符一样使用 's。