CSS佈局的問題：標籤應該重疊框架

Question

我正在這樣的一個模板：

的，你可以看到在框架（3）具有玻璃邊框肚裏的標籤（1落後， 2）。但我不知道如何在CSS中做這種佈局。我搜索計算器，發現下面的線程，但他們並沒有幫助：

• 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

我會建議看一下jquery-ui，它提供了一個例如這樣的標籤元素的例子，你可以使用主題滾輪修改設計o在網站上獲取你想要的顏色。

jquery ui tabs

Answer 3

我認爲你正在尋找z-index。具有較高z-索引的元素將出現在具有較低z-索引的另一元素上方。你可以使用這樣的事情：

.tabSelected { 
    z-index: 99; 
} 

Answer 4

如果」重新使用CSS3，你可以嘗試使用RGBA爲框架的背景顏色 - 這裏有幾個環節：

• SO question/answer
• CSS Tricks article

RGBA允許的div稍微透明的，而保持內容可見 - 只要確保框架略大於內容（因此可以看到）並設置背景色以匹配玻璃效果。