浅谈css position absolute相对于父元素的设置方式

我来为你详细讲解关于CSS中position:absolute相对于父元素的设置方式的攻略。

什么是position:absolute？

position:absolute是CSS中的一个定位属性，表示该元素的位置是相对于最近的已定位的父元素。如果没有已定位的父元素，则相对于html元素进行定位。absolute文档流中脱离，不占据原有的位置，可以随意的设置top，left，bottom和right属性。常用于实现浮动层的效果。

如何让position:absolute相对于父元素进行定位？

在实际开发中，我们可能需要让一个元素相对于其父元素进行定位。常见的方法有：

1. 父元素设置相对定位

此方法比较常用，我们可以给父元素设置为 position:relative，然后在子元素中设置 position:absolute. 这种情况下，子元素的 top, left, right, bottom 属性会相对于父元素进行定位。

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

在上面的代码中，父元素的宽高为200px，而子元素的定位是相对于父元素进行的。设置子元素的top和left属性为50px后，它的左上角就定位在了父元素的(50px,50px)位置。

2. 父元素使用flex布局

另一种方法是使用flex布局，在父元素中将 display 设为 flex，并给该元素设置一个 position:relative;。

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  display: flex;
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

这时，子元素的定位也是相对于父元素进行的。