Html 将元素追加到div的外部

我有一些div，它们一个接一个地放置在其中，它们需要与每个兄弟相邻。同时，有一个按钮/选项卡属于该div，并“焊接”到其父div的顶部，如下图所示：

---

考虑到我的主要目标是将所讨论的div的（笔划）边界用作兄弟元素之间的边界，我将如何创建这种效果？

只需绝对定位按钮即可

div{
宽度：200px；高度：120px；
边框：2倍纯红；
位置：相对位置；
}
.标签{
位置：绝对位置；
高度：20px；宽度：50px；
顶部：-20px；右侧：-2px；
背景：红色；
边框：2倍纯红；
}
分区：第n个孩子（2）{
边框颜色：蓝色；
}
分区：第n个子项（2）.选项卡{
背景：蓝色；
边框颜色：蓝色；
}
/*只是为了在这个片段中腾出空间*/
部门：第一个孩子{
边缘顶部：20px；
}

---

您可以对图片中的蓝色div使用z-index，该值大于红色边框，并将其定位为与红色div-box元素重叠。例如，对于蓝色div填充框：

.blue-filled-div {
    position: absolute;
    left: 100px; // replace the values according to red box
    top: 150px;
    z-index: 10;
}

---

z-index将为蓝色div提供“深度”，并将其放在红色box div的前面。

要将元素添加到div的外部，可以使用jQuery

你可以试试这个例子

<style>
  .bg-green {
    width: 100px;
    height:100px;
    background: #0f0;
    margin: 10px;
  }
</style>
<button onclick="appendElement()">Click To Appent to Outside The Element</button><br><br>
<div id="example" class="bg-green"></div>

<script>
 function appendElement(){
   $('#example').after('<div class="bg-green"></div>')
 }
</script>

.bg绿色{
宽度：100px；
高度：100px；
背景：#0f0；
利润率：10px；
}
单击以显示到元素外部


函数appendElement（）{
$（'#示例'）。在（''）之后
}

---

我希望这有助于使用绝对定位的伪元素。你是说css中的.div:before？蓝色框无论如何都会在红色框的前面/上方，只是因为它出现在html结构的后面。不需要z-index。您如何将一个元素放置在您在那里创建的选项卡中？我的情况是，一个按钮将结束there@Skyler然后使用相同的技术，只定位元素而不是伪元素。我已经更改了我的示例，请重新检查。