Javascript 如何获取相对于另一个div但具有z索引的div

大家好，请看下图

我遇到的问题非常简单和常见，我在循环中有div 1、div2和div3 div 1和div 2是可见的，但是div 3是隐藏的所有没有3的div都是隐藏的，它显示当点击div2时一切都很好，直到现在我遇到的问题是我想要这样的东西

请忽略颜色 我想要的是，div3应该将其自身调整到最佳可用位置和空间，如果左侧没有空间，则转到右侧、顶部或底部，它应该自动调整，就像默认设置中任何事物的标题一样

我试着做的是

  <div> // div1
     <div> //div 2
         <div class='div3'> //div 3
         </div>
     </div>
  </div>

---

请告诉我一些有关这方面的情况

我认为这是您遇到的问题，对吗？
灰色的瓷砖在黑色瓷砖的后面看看：

.div1{
位置：相对位置；
显示：内联块；
宽度：200px；
高度：200px；
背景色：#222；
}
.第2分部{
位置：绝对位置；
显示：内联块；
宽度：50px；
高度：50px；
背景色：#ee2；
最高：60%；
左：60%；
}
.第3分部{
位置：绝对位置；
宽度：50%；
身高：50%；
显示：内联块；
背景颜色：灰色；
左：100%；
最高：80%；
}

为了帮助您，您可以在JSFIDLE或codepen上设置演示：）。你是否考虑过绝对位置的使用？对于“最佳”位置（右/左），将需要javascript。对于“最佳”位置（右/左），将需要javascript-我同意JS..当您设置工作演示时（如@GCyrillus所述）人们可以帮助你更容易、更快捷。我试着告诉你：）不，不，问题是灰色的瓷砖应该尽可能地排列好，就像如果右边没有空间，它应该放在左边或上面。

    .div3 {position:absolute;right:0px;}