css - div边框重叠button边框，如何反转呢？

Question

我遇到了 CSS 和边框问题。我有 this example工作正常，但我想要 this one以同样的方式工作，我的意思是“.current”按钮的右边框(白色)必须与“.simpleTabsContent”边框重叠，但它没有，它在 div 边框后面。

我尝试使用 z-index，但没有任何变化。我尝试了很多东西，但没有任何效果。

CSS 代码无法正常工作:

div.simpleTabs { width: 90px;float:left;padding: 0; }
ul.simpleTabsNavigation { margin: 10px -1px 0 0; padding:0; text-align:left;}
ul.simpleTabsNavigation li { list-style:none; display:inline; padding:0; }
ul.simpleTabsNavigation li button {
margin-bottom: 3px;width: 100%; color:#41635e; border:1px solid #6DA69D;
padding:3px 6px; background:#b6d2ce; font-size:12px; font-weight: bold;
text-decoration:none; font-family: Verdana; }
ul.simpleTabsNavigation li button:hover { background-color:#d3e4e1; }
ul.simpleTabsNavigation li button.current {
background:#ffffff; color:#6da69d; border-right:1px solid #ffffff;}
div.simpleTabsContent { border:1px solid #6DA69D; padding:0px 5px 5px 10px; }
#msg{float:left;  width:350px;  padding: 5px 10px;  margin-top:10px;}
#container{ margin: 0; width: 500px; position: relative;}

CSS 代码如我所愿:

div.simpleTabs { padding: 5px 0 0 5px; }
ul.simpleTabsNavigation { margin:0 10px -1px 10px; padding:0; text-align:left; }
ul.simpleTabsNavigation li { list-style:none; display:inline; margin:0; padding:0; }
ul.simpleTabsNavigation li button {
color:#41635e; border:1px solid #6DA69D; padding:3px 6px; background:#b6d2ce;
font-size:12px; font-weight: bold; text-decoration:none; font-family: Verdana; }
ul.simpleTabsNavigation li button:hover { background-color:#d3e4e1; }
ul.simpleTabsNavigation li button.current {
background:#ffffff; color:#6da69d; border-bottom:1px solid #ffffff; }
div.simpleTabsContent { border:1px solid #6DA69D; padding:5px 15px }
#msg{ margin: 0 5px 5px 10px;}
#container{ margin: 0; float: left; width: 450px;  position: relative;}

我会很感激一些帮助。谢谢。

Answer 1

这可以通过简单地为两个主要元素提供适当的 z-index 值来解决。向 div.simpleTabs 添加:

position:relative; z-index: 2;

到 div.simpleTabsContent 添加:

position:relative; z-index: 1;

现在 simpleTabs div 与 simpleTabsContent div 重叠，这意味着更改后的边框现在可见。这是一个演示:http://jsfiddle.net/WEBnc/