css子绝父相是什么意思(css子绝父相)

CSS的子绝父相（又称为relative/absolute定位）是一种常用于图文混排的定位方式。子元素通过设置绝对定位（position:absolute）相对于父级元素设置相对定位（position:relative）的位置，从而实现定位效果。

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

在上面的例子中，子元素.child绝对定位，并通过top和left属性距离父元素的上左角为0。这样就可以通过调整top和left属性，来控制子元素在父级元素中的位置。

需注意的是，子元素的绝对位置是相对于父级元素进行定位的。这就意味着，如果父元素不存在相对定位，那么子元素的绝对位置则相对于整个文档进行定位，这也就导致了子绝父相的名称。

有时候，在父元素中还会添加其他元素，如背景图和其他内容等。此时，子元素的绝对定位会导致其他元素的覆盖，从而影响页面的呈现。这时可以通过给父元素添加z-index属性，来调整元素的层级，从而控制元素的覆盖情况。

.parent {
position: relative;
z-index: 1;
}
.background {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}

在上面的例子中，父元素和子元素仍然按照之前的方式进行定位，但通过添加z-index属性，将父元素调整到一个较高的层级，使得它在子元素和背景之上。

总的来说，子绝父相是一种非常实用的定位方式，适用于各种图文混排的场景。需要注意绝对定位的元素会有脱离文档流的性质，如果需要对整个页面进行布局调整时，需谨慎使用。