定位(position)
- 定位是一種更加高級的佈局手段
- 通過定位可以將元素擺放到頁面的任意位置
- 使用position屬性來設置定位
可選值:
static 默認值,元素是靜止的沒有開啓定位
relative 開啓元素的相對定位
absolute 開啓元素的絕對定位
fixed 開啓元素的固定定位
sticky 開啓元素的粘滯定位
- 相對定位:
- 當元素的position屬性值設置爲relative時則開啓了元素的相對定位
- 相對定位的特點:
1.元素開啓相對定位以後,如果不設置偏移量元素不會發生任何的變化
2.相對定位是參照於元素在文檔流中的位置進行定位的
3.相對定位會提升元素的層級
4.相對定位不會使元素脫離文檔流
5.相對定位不會改變元素的性質塊還是塊,行內還是行內
- 偏移量(offset)
- 當元素開啓了定位以後,可以通過偏移量來設置元素的位置
top
- 定位元素和定位位置上邊的距離
bottom
- 定位元素和定位位置下邊的距離
- 定位元素垂直方向的位置由top和bottom兩個屬性來控制
通常情況下我們只會使用其中一
- top值越大,定位元素越向下移動
- bottom值越大,定位元素越向上移動
left
- 定位元素和定位位置的左側距離
right
- 定位元素和定位位置的右側距離
- 定位元素水平方向的位置由left和right兩個屬性控制
通常情況下只會使用一個
- left越大元素越靠右
- right越大元素越靠左