对父项的绝对定位 <div>

Question

如您所见，它们是两个盒子，其中一个父 div 和一个子 div 在包装 div 内。所以我想在他们的相对父 div 中应用绝对位置而不是 body.

/*--CSS--*/
 
.wrapper{
  Height:80vh;
  border:1px solid red;
}
.div_1{
  Height:70vh;
  border:1px solid blue;
  margin:20px;
}
.sub_div{
  Height:40vh;
  border:1px solid green;
  margin:20px;
}

.box{
    height:100px;
  width:100px;
  background:orange;
  position:absolute; /*Applied position absolute*/
}

.box1{
  display:flex;
  justify-content:center;
  align-items:center;
  top:0;
  left:0;
}
.box2{
  display:flex;
  justify-content:center;
  align-items:center;
  bottom:0;
  right:0;
}

<!--HTML-->
<div class="wrapper">
  <div class="div_1">
    <div class="box box1">
    box1
    </div>
    <div class="sub_div">
      <div class="box box2">
      box2
      </div>
    </div>
  </div>
</div>

他们实现这一目标的方法也是如此。

Answer 1

绝对位置：

It will position itself according to the closest positioned ancestor.

在你的例子中，你没有任何定位的祖先，所以你的绝对元素将定位到视口。

你要给你的祖先一个不同于静态的位置。我建议在这种情况下使用 relative，因为它尊重页面的流程。

您必须在 CSS 中添加：

.div_1{
  height:70vh;
  border:1px solid blue;
  margin:20px;
  position: relative; // now this element is considered a positioned element.
}
.sub_div{
  height:40vh;
  border:1px solid green;
  margin:20px;
  position: relative;
}

您可以在以下位置阅读有关位置如何影响元素的更多信息：https://cssreference.io/positioning/

对父项的绝对定位 <div>

Absolute Positioning to parent <div>

html

css

css-position