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