CSS - 把自定義選項卡到前

我寫僅使用HTML和CSS自定義選項卡，我想出了這個至今：CSS - 把自定義選項卡到前

index.html：

... 
<ul> 
    <li><a href="#">Products</a></li> 
    <li><a href="#">Loans</a></li> 
    <li><a href="#">Deals</a></li> 
</ul> 
...

index.css ：

ul { margin-top: 10px;} 
ul li { 
    border-bottom: 28px solid #3f3f3f; 
    border-left: 28px solid transparent; 
    border-right: 28px solid transparent; 
    height: 0; 
    display: inline-block; 
    margin: 0 -35px 0 0; 
    padding: 0; 
} 
ul li:hover { border-bottom: 28px solid #7f7f7f; } 
ul li a { 
    color: #fff; 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 5px; 
    text-decoration: none; 
}

我想要第一個標籤出現第二個和第二個面前的第三個面前。

目前它的第一個標籤在第三個標籤後面的第二個標籤之後，看起來像最頂部的標籤。

有關如何讓標籤反轉的任何想法？

來源

2014-02-24 Aniket Inge

您可以使用[z-index的（https：//開頭開發商。 mozilla.org/en-US/docs/Web/CSS/z-index）。請注意，它僅適用於**定位的**元素。 – Vucko

您可以在您的HTML中以相反的順序放置鏈接，並將「float：right」添加到您的「li」中。 http://jsfiddle.net/ae4j8/4/ – putvande

@putvande謝謝 –

如前所述，您可以將鏈接按相反順序排列（因此，您的'第一個'鏈接'Products'最後呈現並因此位於其他鏈接之上）。要將CSS以您使用的原始順序float: right。

Fiddle

來源

2014-02-24 13:14:20 putvande

嘗試添加了liposition:relative和z-index:0。而對於:hover - z-index:20：

CSS：

ul li { 
    ... 
position:relative; 
z-index:0; 
} 
ul li:hover { border-bottom: 28px solid #7f7f7f;z-index:1; }

http://jsfiddle.net/ae4j8/8/

我認爲這將是更好的

來源

2014-02-24 13:14:31 melvas

CSS - 把自定義選項卡到前

回答

相關問題