如何獲得相對於另一個div但具有z-index的div

Question

大家好，請看下面的圖片

我遇到的問題非常簡單和常見，我在循環中看到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>

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>