Question

我用动态生成的子div填充父div。我希望子div被父母绑定（因此他们不能在填充内容时水平扩展父级的形状）。与此同时，我希望子div边框位于父div边界的顶部，以及彼此之间。我把图表拼凑起来以便更好地解释：

通过CSS实现此目的的最佳方法是什么？我环顾四周，似乎找不到堆叠边框的解决方案，但也保持子div受父div（在x轴上）的限制。

Answer 1

重叠的边框总是有点棘手。在您的情况下，我不建议使用绝对位置和z索引 - 这只会使事情变得更复杂，并且您再也无法依赖块元素的本机行为。

让我们说你的HTML看起来像这样：

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

通过仅对:first-child应用顶部边框，您可以实现重叠儿童的错觉。即使你动态地向顶部添加了更多的div，第一个也总是那个看起来像＃34;顶部＆＃34;：

.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。

Answer 2

您可以使用z-index影响css中的堆栈顺序，但是您需要在这些元素上使用position：absolute或position：fixed。

.div1 {
    width: 200px;
    height: 100px
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1    
}
.div2 {
    width: 200px;
    height: 100px
    position: absolute;
    top: 190px;
    left: 0;
    z-index: 2    
}

该css应显示与.div1重叠的.div2 10px 如果高度是动态的，你可以通过JS添加它，或者在下一个中添加div作为子项。请注意每个＆＃34;位置＆＃34;属性与最近的父位置相关或绝对有关！

Answer 3

如果我理解正确，您可以使用:after和position absolute与z-index:-1放置父母的边框：

.parent { position: relative; }
.parent:after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  border: 1px solid black;
}

对于孩子们，你可以删除顶部边框，如果不是：第一：

.child:not(:first-child) {
  border-top: 0;
}

Answer 4

你也可以尝试这个。定义两个不同的类。边框宽度和样式的“边框”类。还有一个颜色类。像这样：

<style>
     .border { 
              border: 5px solid;
             }

    .green {
            border-color: green;
            border-top-width: 0px;
           }

    .yellow {
             border-color: yellow;
            }
  /*I do not use a border-top-width to remowe top because this is the first div.*/

    .red {
          border-color: red;  
          border-top-width: 0px;
         }
</style>
    <div class="container">
      <div class="border yellow">yellow</div>
      <div class="border green">green</div>
      <div class="border red">black</div>

    </div>

在CSS中堆叠边框

4 个答案: