子元素边框位于父边框之上答案

【问题标题】：child element border positioned over parent border子元素边框位于父边框之上
【发布时间】：2014-07-31 23:11:43
【问题描述】：

我在页面顶部有一组简单的链接，下方有黑色边框。活动链接下方应显示白色边框。此边框应直接位于黑色边框上方。

现阶段我无法更改 HTML，只能更改样式。

这是一个小提琴 - http://jsfiddle.net/grimmus/8E4D5/

<div class="c-landing-pg-tabs-container">
    <div class="c-landing-pg-tabs paymentsLeft">
        <div><a href="#self" class="active-tab">Payments</a></div>
        <div><a href="#self">Inquiries</a></div>
        <div><a href="#self">Trade</a></div>
    </div>
</div>

我很难将它定位在黑色边框上。我可以将显示更改为 inline-block，增加 A 元素的高度，但它始终位于下方。还尝试更改为 position:relative 并将其稍微向下推。似乎某种 z-index 可能会起作用，但不确定是否可行，因为所有元素都包含在同一个父级中。

感谢任何提示。

【问题讨论】：

标签： html css

【解决方案1】：

从 .c-landing-pg-tabs-container 中移除 overflow:hidden 并添加 padding-bottom: 12px;到 .c-landing-pg-tabs a.active-tab。新规则如下所示：

.c-landing-pg-tabs-container {
    position: relative;
    height: 41px;
    width: 100%;
    min-width: 240px;
    border-bottom: 2px solid #282828;
    margin-bottom: 16px;
}

.c-landing-pg-tabs a.active-tab {
    border-bottom: 2px solid #FFF;
    color: #FFF;
    padding-bottom: 12px;
}

这是你修改后的小提琴：http://jsfiddle.net/sc5pB/

【讨论】：