border - 在 CSS 中堆叠边框

Question

我正在用动态生成的子 div 填充父 div。我希望子 div 受父 div 约束(因此它们在填充内容时不能水平扩展父 div 的形状)。同时，我希望子 div 边框位于父 div 边框的顶部，以及彼此之间。我拼凑了一张图表来更好地解释:

通过 CSS 实现此目的的最佳方法是什么？我环顾四周，似乎找不到既能堆叠边框又能使子 div 受父 div(在 x 轴上)限制的解决方案。

Answer 1

重叠边界总是有点棘手。对于您的情况，我不建议使用绝对位置和 z 索引——这只会使事情变得更加复杂，并且您将无法再依赖 block 元素的 native 行为。

假设您的 HTML 如下所示:

<div class="parent">
    <div class="child yellow"></div>
    <div class="child blue"></div>
    <div class="child red"></div>
</div>

您可以通过仅对 :first-child 应用顶部边框来实现子级重叠的错觉。即使您动态地向顶部添加更多 div，第一个始终是看起来“在顶部”的那个:

.child {
    border-style: solid;
    border-width: 0 2px 2px 2px;
    background: white;
}

.child:first-child {
    border-top-width: 2px;
}

.yellow { 
    border-color: yellow;
}

.blue {
    border-color: blue;
}

.red {
    border-color: red;
}

父项需要一些技巧，因为如果您在它周围添加一个常规边框，它就会显示在子项周围。

.parent {
    width: 500px; /* or any other width */
    height: 100vh; /* or any other fixed height */
    overflow-y: auto; /* make scrollable */
    box-shadow: inset 2px 2px 0 black, inset -2px -2px 0 black;
}

内嵌 box-shadow 在父级内部创建实线边框的错觉。为确保它在子边框下方不可见(框阴影往往比边框稍微模糊)，您需要确保子边框有背景颜色。

编辑:Here's a demo .