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

Question

这是我正在尝试做的事情的粗略描述。如果它不能很好地解释它，我可以拼凑一个小提琴。

黑盒子是a <div>，粉红色的也是div。我想要的是让它们看起来有点像标签。因此，当一个处于活动状态时，它会覆盖父级的边框，从而产生在选项卡中很重要的“桥梁”效果。

我想我可以让活动的稍微宽一点，这样它就可以覆盖边界。问题是，如果我overflow-x: hidden;的较宽部分位于黑色轮廓的“下方”，并且如果我执行自动或可见，那么它只会让它滚动。

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

我究竟做错了什么？

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

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>

Answer 2

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

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

Answer 3

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

.activediv{
    left: 5px;
}

Answer 4

如果你使用position: absolute而不是你可以在 parentposition: relative中实现该布局。overflow-y: hiddendiv

你可以在这里看到结果：http: //jsfiddle.net/eugip9/sqjck/