CSS中的子絕父相是一種非常重要的定位方式。它允許子元素相對于父元素進行定位，并且可以使元素在不同屏幕尺寸下保持一定的布局結構。下面我們來看一下它的具體作用。

.parent {
position: relative;
height: 400px;
width: 600px;
border: 1px solid #000;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

上面的代碼展示了子絕父相的基本用法。我們首先給父級元素設置了相對定位，然后在子元素中使用了絕對定位。接下來我們來詳細分析一下此時子元素的定位情況。

由于父級元素上設置了相對定位，子元素就可以相對于它進行絕對定位了。此時子元素的top和left都是50%，也就是在父元素的中心位置。同時在我們使用了transform屬性，使得子元素居中于父元素內部。以上的設置就實現了子元素相對于父元素的居中定位效果。

父級元素
|
子級元素

子絕父相的使用還可以用來實現響應式布局。不同的屏幕尺寸下元素位置和大小的變化可能會打亂原來的頁面布局，而使用子絕父相的方法可以使元素在不同屏幕尺寸下保持一定的布局結構。

總的來說，子絕父相在CSS中具有較為重要的作用。它為布局提供了更靈活的方式，也可以幫助我們實現更多的頁面效果。需要注意的是，子元素定位時相對于父元素進行計算，同時需要謹慎使用定位屬性，以免影響頁面的整體布局。