[分享]CSS中子绝父相布局

CSS中，子绝父相布局是一种常见的布局方式，也是一种相对布局的方法。所谓子绝指子元素使用绝对定位，父相指父元素使用相对定位的布局方式。子绝父相的的特点在于可以实现子元素的精准定位，同时保持父元素的高度...

CSS中，子绝父相布局是一种常见的布局方式，也是一种相对布局的方法。所谓子绝指子元素使用绝对定位，父相指父元素使用相对定位的布局方式。子绝父相的的特点在于可以实现子元素的精准定位，同时保持父元素的高度自适应。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
} 

使用子绝父相布局时，首先需要给父元素添加相对定位的属性，这样子元素才能以该父元素为基准进行绝对定位。然后，子元素通过绝对定位来进行精准的定位，这里的top、left、right、bottom属性可以有效地实现位置的调整。 这种布局方式在实际开发中也较为常见，比如Tab组件的实现、消息提示框的展示等等。 需要注意的是，使用子绝父相布局时，最好对父元素设置一个明确的宽度，否则会导致无法预测的效果。