1.png

2.png

3.png

4.png

元素定位的屬性

注意：top、bottom不能兩者一起用（left和right也同理），要不用top + left/right，要不用bottom + left/right。

實例代碼：

5.png

6.png

1、邊偏移

7.png

2、定位模式（定位的分類）

8.png

一個簡單完整定位的實例代碼：

9.png

四種定位機制

1、靜態(tài)定位（static）

10.png

實例代碼：

11.png

2、相對定位relative(自戀型）

12.png

13.png

實例代碼：

14.png

效果圖：

15.png

3、絕對定位脫標

16.png

實例代碼：

17.png

父級沒有定位

18.png

實例代碼：

19.png

父級有定位

20.png

實例代碼：

21.png

子絕父相（開發(fā)種一般推薦這樣用）

22.png

23.png

4、固定定位

24.png

25.png

定位練習——哈根達斯

實例代碼：

26.png

效果圖：

27.png

絕對定位——水平垂直居中

28.png

實例代碼：

29.png

效果圖：

30.png