javascript - 如何在给定的 div 下方，在其他 div 之上创建一个 div，但不改变其他 div 的位置？

Question

如何在不移动位置的情况下创建一个 div，就在给定的 div 下面但在页面中所有其他 div 之上？这是一个例子:

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

我想在 div2 的 onClick 处理程序中创建一个 div，这样当单击 div2 时，将显示新创建的 div，它与 div2 左对齐，位于 div2 下方，但位于下方其他 div 之上。页面的新外观将是:

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

解决方案必须是通用的。例如，Javascript 函数将是:

 createDivBelow(css selector, height, width)

因此，给定任何 div 的 css 选择器，该函数将在其下方创建一个 div，左对齐并具有指定的高度和宽度。关键问题是它必须定位，以便下面或其他地方的其他 div 不会移动。新创建的 div 必须在最上面。我认为新的 div 必须是绝对定位的，可能相对于 body。但是怎么知道把它放在哪里呢？毕竟，div2 本身可能会嵌入到其他 div 中。

编辑以解决一些评论和提议的解决方案 我需要一个通用的解决方案，不考虑页面的结构。解决方案不能感知其他元素，更不用说依赖于其他元素的 CSS，而且 div2 本身可以放置在任何地方。

Answer 1

根据 OP 的评论更新

理论上你可以这样做:

1. 当一个 div 被点击时，给它添加一个类，将它的位置设置为 static 以外的位置，例如position: relative 和 z-index 的值大于其余 div 的值，它将位于顶部

2. 将新创建的 div 附加到点击的那个，给它一个绝对位置，将它的 left 设置为 0 并且它的top 到 100%，它将被定位为左/底对齐，没有任何其他元素移动，无论哪个 div 是点击。

有了上面的内容，它也会响应，如果用户改变屏幕宽度，它也会随之移动。

---

这是一个简单的演示。

堆栈片段

$("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>