CSS布局问题：选项卡应与框架重叠

Question

我正在制作一个这样的模板：

如您所见，框架（3）有一个玻璃状边框，位于标签（1,2）后面。但我不知道如何在CSS中进行此布局。我搜索了stackoverflow并找到了以下线程，但是他们没有帮助：

• https://stackoverflow.com/questions/6649360/how-to-overlap-put-a-frame-layout-from-top-border-of-an-imageview
• CSS problem, creating tabs

HTML代码是这样的：

<div id="frame">
<nav>
<ul id="topnav">
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
<li>Tab6</li>
<li>Tab7</li>
</ul>
</nav>
</div>

Answer 1

试试这个

HTML：

<div id="frame">
    <ul>
        <li><a href="javascript:void(0);">Tab 01</a></li>
        <li><a href="javascript:void(0);" class="active">Tab 02</a></li>
        <li><a href="javascript:void(0);">Tab 03</a></li>
        <li><a href="javascript:void(0);">Tab 04</a></li>
    </ul>
</div>
<div id="frame2">Frame 02</div> 

CSS：

 #frame,#frame ul
    { height:30px;
       background:#f0f0f0;
    }
    #frame ul li
    { height:30px;
      float:left;
        padding-right:2px;
    }
    #frame ul li a
    { position:relative;
      height:30px;
      display:block;
      float:left; /* for IE6 bug */
      background-color:#f00;
      left:0;
        top:0;
        padding:0 4px;
        color:#fff;
    }
    #frame ul li a:hover,#frame ul li a.active
    {  height:40px;
    }
    #frame2
    {  border:#000 1px solid;
        padding:10px;
    }

请检查JSFIDDLE以获取参考

Answer 2

我认为您正在寻找z-index。具有较高z-index的元素将出现在具有较低z-index的另一元素之上。你可以使用这样的东西：

.tabSelected {
    z-index: 99;
}

Answer 3

我建议看一下jquery-ui，它在标签元素的网站上提供了一个例子，你可以使用网站上的主题滚轮修改设计，以获得你想要的颜色。

jquery ui tabs

Answer 4

如果你正在使用CSS3，你可以尝试使用RGBA作为框架的背景颜色 - 这里有几个链接：

• SO question/answer
• CSS Tricks article

RGBA将允许div在保持内容可见的同时略微透明 - 只需确保框架略大于内容（因此可以看到）并设置背景颜色以匹配玻璃效果。