html - 为绝对位置元素应用相对位置。（相对于子 div）

Question

我希望div2成为relative，div3但由于它已经定位absolute到div1（相对），我不知道如何实现这一点。

.div1 {
  position: relative;
}

.div2 {
  position: absolute;
}

.div3 {
  position: absolute;
}

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

标签： htmlcssposition

Answer 1

如果我理解你想要的是将 div3 相对于 div2 定位，你仍然可以这样做，因为绝对定位元素将引用具有绝对位置的父元素。

具有位置的元素：绝对；相对于最近的定位祖先定位（而不是相对于视口定位，如固定）。

然而; 如果绝对定位元素没有定位的祖先，它使用文档正文，并随着页面滚动移动。

注意：“定位”元素是指其位置除静态之外的任何元素。

我包含了一个片段来可视化它。

.div1{
height:150px;
border:1px solid black;
position:relative;
}
.div2{
height:80px;
position:absolute;
top:20px;
border:1px solid blue;
}
.div3{
position:absolute;
top:5px;
height:30px;
border:1px solid red;
}
div{
width:80px;
}

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