div 边框重叠按钮边框，如何反转它

Question

我在 css 和边框方面遇到了问题。我有这个例子运行良好，但我希望这个以同样的方式工作，我的意思是".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 索引值来解决。要div.simpleTabs添加：

position:relative; z-index: 2;

要div.simpleTabsContent添加：

position:relative; z-index: 1;

现在，simpleTabsdiv 与simpleTabsContentdiv 重叠，这意味着您更改的边框现在可见。下面是一个演示： http://jsfiddle.net/WEBnc/

Answer 2

原始链接 http://jsfiddle.net/LLVtr/在最新的Chrome中，按钮和消息之间有间隙。通过在版本 2 中为消息添加边距将使其看起来相同。

添加到 #msg

margin-left: 2px;

结果：

http://jsfiddle.net/GfENx/3/

Answer 3

div.simpleTabs { position: relative; width: 90px;float:left;padding: 0; z-index: 1; margin-right: -1px;}
ul.simpleTabsNavigation { margin: 10px 0px 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 #fff;}
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;
}
​

Answer 4

div.simpleTabs { width: 90px;float:left;padding-right: 3px; }

而不是填充：0;我已经把它右边填充：3px;

http://jsfiddle.net/VS7fn/

Answer 5

div.simpleTabs { width: 90px;float:left;padding-right: 0px; position: absolute;}
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; margin-left:90px;}
#container{ margin: 0; width: 500px; position: relative;
}

它会为你工作。