如何使子元素覆盖父元素的边框？

Question

这是我试图完成的大致示意图。如果无法清楚地解释，请让我做个演示吧。

黑色方框是一个

，粉色方框也是

。我希望它们看起来像选项卡那样。因此当一个选项卡处于活动状态时，它将覆盖父元素的边框，从而产生选项卡中重要的“桥接”效果。

我认为只需使活动元素略微变宽即可覆盖边框。但问题是如果我使用overflow-x: hidden;，则更宽的部分会“位于”黑色轮廓线下，如果使用auto或visible，则会让它滚动。

重要提示：粉色方块需要相对定位。

我做错了什么？

编辑：忘记提到最重要的部分了。黑盒子有overflow-y: hidden。没有这个属性时，以下方法可以正常工作，但当我添加它时，它返回到之前的状态。

- Troy Cosentino

Answer 1

也许这种方法能帮到您：

可能这个方法可以帮到你：

.main {text-align: right;border: 10px solid #000;}
.main > div > div {width: 100px; height: 60px; display: inline-block;background-color: red;margin: 10px 0;}
.main > .selected > div {margin-right: -10px;padding-left: 10px;}

<div class="main">
    <div class="selected"><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
</div>

- fje

---

http://jsfiddle.net/cawu5/2/ 我修复了边框问题，但我不确定这是否适用于您的特定用例。 - fje

Answer 2

您只需要在容器div上设置一个宽度，而不使用overflow-x hidden;。

这是一个示例：http://jsfiddle.net/YhAmh/1/

- pizza247

Answer 3

由于您的粉色div已经具有position: relative，因此您只需将活动的div向右偏移一点：

.activediv{
    left: 5px;
}

- Kenneth

Answer 4

如果您使用position: absolute而不是position: relative，则可以在父级div中使用overflow-y: hidden来实现该布局。

您可以在此处查看结果：http://jsfiddle.net/eugip9/sqjck/

- Pigueiras