How to create a div, below a given div, on top of others, but without changing positions of others?

Question

How to create a div, just below a given div but on top of all other divs in the page without moving their position? Here is an example:

  ---------------------------------------------
  |               |          |                |
  |    div1       |   div2   |         div3   |
  |               |          |                |
  ---------------------------------------------
  |                     |                     |
  |    div4             |         div5        |
  |                     |                     |    
  ---------------------------------------------
  |... some more divs...

I want to create a div, in div2's onClick handler, so that when div2 is clicked on, the newly created div will be displayed which is left aligned to div2, is below div2 but is on top of other divs below. The new appearance of the page will be:

  ---------------------------------------------
  |               |          |                |
  |    div1       |   div2   |         div3   |
  |               |          |                |
  ---------------------------------------------
  |               |                  |        |
  |    div4       |     Newly        |  div5  |
  |               |     Created      |        | 
  -----------------     Div          ----------
  | ...some more..|                  |        | 
  |  ...divs...   |                  |        | 
  |               |                  |        | 
  |               |                  |        | 
  |               |                  |        | 
  ---------------------------------------------

The solution must be generic. The Javascript function will, for example, be:

 createDivBelow(css selector, height, width)

So, given the css selector of any div, the function will create a div below it, left aligned and of the specified height and width. The critical issue is that it must be positioned so that other divs below or elsewhere are not moved. The newly created div must be on top. I figured that the new div must be absolutely positioned, possibly with respect to body. But how to know where to position it? Afterall, div2 itself may be embedded in other divs.

EDIT to address some of the comments and proposed soutions I need a generic solution, oblivious to the structure of the page. The solution must not be aware of other elements, let alone depend on the CSS of other elements and div2 itself may be placed anywhere.

Answer 1

Updated based on a comment by the OP

Theoretically you do like this:

1. when a div is clicked, add a class to it, which set its position to other than static, e.g. position: relative, and z-index to a value greater than the rest of the div's, and it will be on-top

2. append the newly created div to the clicked one, give it an absolute position, set its left to 0 and its top to 100%, and it will be positioned left/bottom aligned, w/o any other elements moving, and no matter which div is clicked.

With the above, it will also be responsive, and if the user change screen width, this will move along.

---

Here is a simple demo.

Stack snippet

$("nav div").click(function () {

  $(this).toggleClass('haspopup');

  if ($(this).hasClass('haspopup')) { 
     $(this).append("<div class='popup'>Here is your popup</div>");
  } else {
     $(this).find('.popup').remove();
  }
  
});

nav {
margin-top: 50px;
  display: flex;
  counter-reset: demo;
}
nav div {
  border: 1px solid black;
  flex: 1;
  padding: 20px;
}
nav > div::before {
  content: 'DIV';
}
nav + div {
  background: lightgray;
  padding: 20px;
}

nav div.haspopup {
  position: relative;
  z-index: 1000;
}
nav div.haspopup .popup {
  position: absolute;
  left: 0;
  top: 100%;
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
  <div></div>
  <div></div>
  <div></div>
</nav>

<div>This element won't move or be affected when the popup shows</div>

Answer 2

It looks like you want to make a navigation bar. Blind shot :

$("nav div").click(function () {
  if ($(this).data("menu")) {
    $(this).data("menu").remove();
    $(this).removeData("menu")
  } else {
    var t = this.offsetTop;
    var l = this.offsetLeft;
    var h = this.offsetHeight;
    $(this).data("menu",
      $("<div class=\"menu\">menu</div>")
      .appendTo(document.body)
      .css({ "left": l, "top": t + h})
    );
  }
});

body {
  position: relative;
  padding-top: 2em; /* test */
}
div {
  display: inline-block;
  border: 1px solid black;
  box-sizing: border-box;
}
nav div {
  width: 100px;
}
main div {
  width: 150px;
}
.menu {
  background: white;
  position: absolute;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav><div>div 1</div><div>div 2</div><div>div 3</div></nav>
<main><div>div 4</div><div>div 5</div><main>

Answer 3

This may help you

$(document).ready(function(){
    $(".child").click(function(){        
        createDivBelow($(this), "150px", "150px");
    });
});
function createDivBelow(cssSelector,height,width){
        $(".newchild").show();
        $(".newchild").css({"left":cssSelector.position().left+"px"});
        $(".newchild").css({"top":(cssSelector.position().top+cssSelector.height())+"px"});
        $(".newchild").css({"height":height});
        $(".newchild").css({"width":width});
}

.parent{
width:100%;
}

.child{
  width:150px;
  height:150px;
  float:left;
  border:1px solid gray;
}
.newchild{
  position:absolute;
  width:150px;
  height:150px;
  display:none;
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  
  <div class="child">div1</div>
  <div class="child">div2</div>
  <div class="child">div3</div>
  <div class="child">div4</div>
  <div class="child">div5</div>
  <div class="child">div6</div> 
  <div class="child">div7</div>
  <div class="newchild">Newly created div</div>
</div>