CSS中子绝父相布局

发表于前端技术学习版块 css,教程

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

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

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

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

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。