将元素追加到div之外

Question

我有div，他们一个接一个地定位，他们需要与每个兄弟姐妹相邻。同时，有一个属于这个div的按钮/标签，并且“焊接”到其父div的顶部，如下图所示：

如果我的主要目标是让有问题的div的（描边）边框作为兄弟元素之间的边界，我将如何创建这种效果？

Answer 1

只是按钮的绝对位置

div{
  width:200px; height:120px;
  border:2px solid red;
  position:relative;
}

.tab{
  position:absolute;
  height:20px; width:50px;
  top:-20px; right:-2px;
  background:red;
  border:2px solid red;
}

div:nth-child(2){
  border-color:blue;
}
div:nth-child(2) .tab{
  background:blue;
  border-color:blue;
}

/*just to make space in this snippet*/
div:first-child{
  margin-top:20px;
}

<div>
  <button class="tab"/>
</div>
<div>
  <button class="tab"/>
</div>

Answer 2

将元素添加到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>

我希望这可以帮助

Answer 3

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

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

z-index将给出深度＆＃39;到你的蓝色div并把它放在红盒div前面。