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

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

黑盒子是< div>而粉红色的也是div.我想要的是他们看起来有点像标签.因此,当一个处于活动状态时,它会覆盖父级的边框,从而提供在标签中很重要的“桥接”效果.

我以为我可以让活动的稍宽一点,这样就可以掩盖边界.问题是如果我有溢出x：隐藏;更宽的部分是在黑色轮廓的“下方”,如果我做自动或可见,那么它只是让它滚动.

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

我究竟做错了什么？

编辑：忘了提到最重要的部分.黑盒子溢出了：隐藏了.如果没有它,下面的方法工作正常,但是当我添加它时,它会回到原来的样子

解决方法

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

<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