将元素附加到 div 之外

Question

我有 divs，其中它们一个接一个地放置，并且它们需要与每个兄弟姐妹相邻。同时，有一个属于这个div的button/tab，并且在其父div的顶部"welded"，如下图：

考虑到我的主要目标是让相关 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 使用 z-index，它的值大于红色边框框，并将其放置在与红色 div 框元素重叠的位置.例如，对于您的蓝色 div 填充框：

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

z-index 会给你的蓝色 div 'depth' 并把它放在红色框 div.

前面

Answer 3

要在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>

希望对您有所帮助

将元素附加到 div 之外

Append element to outside of div

html

css

floating