CSS中的絕對定位,是一種非常常用的定位方式。相對于元素的父級容器,絕對定位可以讓元素在父級元素內(nèi)部自由移動(dòng),而不會(huì)被其他元素所影響。
.positioned { position: absolute; top: 50px; left: 50px; }
上面的代碼將一個(gè)名為".positioned"的元素,設(shè)置為絕對定位,并將它的頂部和左側(cè)設(shè)置為50像素。這意味著要在其父元素內(nèi)將該元素定位在50像素的左上角,無論其他元素的位置如何,該元素都會(huì)按照指定位置進(jìn)行定位。
除了top和left屬性外,絕對定位還可以使用bottom和right屬性。例如:
.positioned { position: absolute; bottom: 0; right: 0; }
上面的代碼將一個(gè)名為".positioned"的元素,設(shè)置為絕對定位,并將它的底部和右側(cè)設(shè)置為0像素。這將在其父元素的右下角將該元素定位,無論其他元素的位置如何,該元素都會(huì)按照指定位置進(jìn)行定位。
有一些需要注意的事情是:
- 當(dāng)元素被設(shè)置為絕對定位時(shí),它會(huì)脫離文檔流。這意味著其他元素將不會(huì)受到它的影響。
- 如果該元素有父元素,而該父元素并沒有設(shè)置為定位元素(也就是沒有設(shè)置為相對定位、絕對定位或固定定位),則該元素將基于文檔的最上層元素進(jìn)行定位。
- 可以通過z-index屬性來控制元素在其堆疊順序中的位置。一個(gè)具有更高z-index值的元素將會(huì)被放置在一個(gè)具有較低z-index值的元素的上方。