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

Question

这是我想要做的一幅粗略的画面。如果它不能很好地解释它，我可以把小提琴放在一起。

黑匣子是<div>，粉红色的are也是div。我想要的是让他们看起来像那种之类的标签。因此，当一个处于活动状态时，它会覆盖父项的边框，从而提供在标签中很重要的“桥接”效果。

我认为我可以让活动的稍微宽一点，这样就会掩盖边界。问题是，如果我有overflow-x: hidden;更宽的部分是在黑色轮廓下面，如果我做自动或可见，那么它只是让它滚动。

一件重要的事情：粉红色需要相对位置。

我做错了什么？

编辑：忘了提及最重要的部分。黑匣子有overflow-y: hidden。如果没有它，下面的方法工作正常，但是当我添加它时，它会回到原来的样式

Answer 1

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

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

Answer 2

也许这种方法可以帮到你：

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

和css：

.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;}

jsFiddle Demo

Answer 3

由于您的粉红色div已经有position: relative，因此您只需将活动的div稍微偏移到右侧：

.activediv{
    left: 5px;
}

Answer 4

如果您使用position: absolute代替position: relative，则可以在父overflow-y: hidden中使用div实现该布局。

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