css子绝父相的作用

CSS的子绝父相是一个非常重要的概念，它可以帮助我们更加灵活地控制页面布局，让我们来了解一下。

.parent {
  position: relative;
}

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

上面的代码是一个非常简单的子绝父相示例，我们可以看到，父元素设置了position: relative属性，这样子元素就可以设置position: absolute属性，以父元素为参考点分别设置top和left的值，来实现精准定位。

使用子绝父相的好处是可以实现绝对定位布局，例如实现图片与文字重叠，实现菜单下拉列表等。而且子元素不会影响到其他元素的布局，所以非常灵活。

需要注意的是，子元素的position属性值必须设置为absolute或fixed，而不是static或者relative。父元素的position属性值可以是relative，absolute或者fixed，但是不能同时设置成static。

CSS的子绝父相是一个强大而又灵活的概念，它可以实现各种不同的布局效果，帮助我们打造更加独特的网页设计。