標簽或其他容器元素來包裹一個元素，將其成為該容器元素的子元素，也就是父元素。這個時候，我們就可以使用CSS根據父元素進行定位。如下所示的例子：

<div class="container">
<div class="box">
<p>Hello World!</p>
</div>
</div>
.container {
position: relative;
width: 500px;
height: 500px;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: #ccc;
}
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在上面的例子中，我們先定義了一個容器元素.container，并且對其進行了定位，設置了其寬度和高度為500px。然后我們再在.container中定義了一個.box元素，將

Hello World!

作為.box的子元素。

接下來，通過對.box元素進行定位，設置了其top和left坐標，使其距離.container的左邊和上邊都有50px的距離，然后將它的width和height設置為200px，這樣.box元素就成了一個200x200像素的矩形，背景色為#ccc。

最后我們再對p元素進行定位，將其距離.box元素的頂部和左側都居中，這里我們用了transform: translate(-50%, -50%)，將該元素水平和垂直方向都向左上角移動了50%。

這就是CSS根據父元素進行定位的一個例子，通過這種方式可以輕松實現元素的自由排版和布局。對各位前端工程師來說，熟練掌握這個知識點，可以更好的開發出精美的網站。