在 CSS 中堆叠边框

Question

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

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

Answer 1

您可以使用 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 应该显示 .div2 10px 与 .div1 重叠如果高度是动态的，您可以通过 JS 添加它，或者在 div 上添加作为下一个子项。请注意，每个 "position" 属性都与最近的父位置相对或绝对相关！

Answer 2

如果我没理解错的话，您可以使用 :after 和 position absolute 放置 parent 的边框，使用 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;
}

并且对于 children，如果不是，您可以删除顶部边框：第一：

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

Answer 3

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

假设您的 HTML 看起来像这样：

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

您可以通过仅向 :first-child 应用顶部边框来实现子项重叠的错觉。即使您在顶部动态添加更多 div，第一个也始终是显示为 "on top":

的那个

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

你也可以试试这个。定义两个不同的 classes。 "Border" class 用于边框宽度和样式。还有一种颜色 class。像这样：

<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 中堆叠边框

Stacking borders in CSS

css

border