javascript - 如何获得相对于另一个 div 但具有 z-index 的 div

Question

大家好请看下图

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

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

我尝试做的是类似

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

CSS

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

请告诉我一些关于这件事的事

Answer 1

我想这就是您遇到的问题吧？
他们灰色的瓷砖在黑色的瓷砖后面看看:

.div1 {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #222;
}
.div2 {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #ee2;
  top: 60%;
  left: 60%;
}
.div3 {
  position: absolute;
  width: 50%;
  height: 50%;
  display: inline-block;
  background-color: gray;
  left: 100%;
  top: 80%;
}

<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>
<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

解决方法很简单: 如果您添加的 z-index 大于 1，则它是固定的。
我添加了 5 的 z-index。

.div1 {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #222;
}
.div2 {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #ee2;
  top: 60%;
  left: 60%;
}
.div3 {
  position: absolute;
  width: 50%;
  height: 50%;
  display: inline-block;
  background-color: gray;
  left: 100%;
  top: 80%;
  z-index: 5;
}

<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>
<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>

<div class="div1">
  <div class="div2"></div>
  <div class="div3"></div>
</div>