如何使用z-index获得相对于另一个div的div

Question

大家好，请看下面的图片

我遇到的问题非常简单和常见我在循环div 1中有div 1，div2和div3而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

我认为这是您遇到的问题吗？ 他们在黑色背后的灰色瓷砖看看：

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

解决方案非常简单： 如果你添加一个超过1的z-index就固定了。
我添加了一个5的z-index。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;