Append element to outside of div - html

Question

I have divs wherein they are positioned one after another, and they need to be adjacent to each sibling. Simultaneously, there is a button/tab that belongs to this div, and is "welded" to the top of its parent div, like pictured below:
How would I create this effect, given that my primary goal is to have the (stroked) borders of the div in question serve as the border between sibling elements?

Answer 1

just absolute position the button
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

to add element to outside of div, you can use jQuery.
you can try this example
<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>
i hope this can help

Answer 3

You can use z-index for your blue div in the picture that has some value that is greater of the red bordered box and position it to overlap with red div box element. For example for your blue div filled box :
.blue-filled-div {
position: absolute;
left: 100px; // replace the values according to red box
top: 150px;
z-index: 10;
}
z-index will give 'depth' to your blue div and place it in front of red box div.