1、定位

把元素根據(jù)我們需要放在指定的位置，即定位。

以上效果，標(biāo)準(zhǔn)流或浮動都無法快速實現(xiàn)，此時需要定位來實現(xiàn)。

所以︰

浮動可以讓多個塊級盒子一行沒有縫隙排列顯示，經(jīng)常用于橫向排列盒子。

定位則是可以讓盒子自由的在某個盒子內(nèi)移動位置或者固定屏幕中某個位置，并且可以壓住其他盒子。

定位:將盒子定在某一個位置，所以定位也是在擺放盒子，按照定位的方式移動盒子。

定位模式通過css樣式的position屬性來進行設(shè)置，有四個取值：

2、固定定位

脫離標(biāo)準(zhǔn)流，把元素固定到指定的頁面位置，不論瀏覽器上下怎么翻動，被固定的元素隨著瀏覽器的滾動而滾動，就像你看到的討厭的廣告一樣，不論你怎么翻頁，他一直在哪里。

語法：

選擇器{ position:fixed }

1

2

3

寫完上述屬性值以后，可以直接設(shè)置top值，或left，right，bottom值，這些值就是以頁面左上角為圓點上左右下的距離。如果想在右下，就設(shè)置bottom：0；right:0;這種直接下上下左右的屬性后面賦值，只對定位起作用。

主要用于頁面廣告

例：

.box{

width: 200px;

height: 200px;

background-color: red;

position: fixed;

/top: 80px;/

left: 0;

bottom: 0;

/right: 80px;/

}

元素的位置相對于瀏覽器窗口是固定位置，即固定在在瀏覽器上，即使窗口是滾動的它也不會移動

Fixed定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間

如圖，給綠色的div添加固定定位后，不會隨著屏幕的滾動而發(fā)生變化，綠色的div固定在了圖中的位置

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-d9eqXNoK-1629718196321)(\asseits\固定定位.png)]

代碼：

我是第1個h1標(biāo)簽

我是第2個h1標(biāo)簽

我是第3個h1標(biāo)簽

我是第4個h1標(biāo)簽

我是第5個h1標(biāo)簽

我是第6個h1標(biāo)簽

我是第7個h1標(biāo)簽

我是第8個h1標(biāo)簽

我是第9個h1標(biāo)簽

我是第10個h1標(biāo)簽

我是第11個h1標(biāo)簽

我是第12個h1標(biāo)簽

我是第13個h1標(biāo)簽

我是第14個h1標(biāo)簽

我是第15個h1標(biāo)簽

我是第16個h1標(biāo)簽

我是第17個h1標(biāo)簽

我是第18個h1標(biāo)簽

我是第19個h1標(biāo)簽

我是第20個h1標(biāo)簽

我是第21個h1標(biāo)簽

我是第22個h1標(biāo)簽

我是第23個h1標(biāo)簽

我是第24個h1標(biāo)簽

我是第25個h1標(biāo)簽

我是第26個h1標(biāo)簽

我是第27個h1標(biāo)簽

我是第28個h1標(biāo)簽

我是第29個h1標(biāo)簽

我是第30個h1標(biāo)簽

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

3、相對定位 -重要

相對定位是元素在移動位置的時候，是相對于它原來的位置來說的

以自我為中心，自戀型選手

不脫離標(biāo)準(zhǔn)流，會隨著瀏覽器的滾動而滾動。設(shè)置完定位以后，元素會隨著設(shè)置的值發(fā)生變化，但是最初所占的位置還在，不會被下面元素頂上去

語法：

選擇器：{ position：relative; }

1

2

3

如果只對相對定位設(shè)置定位值，那么參照的原點是元素本身的左上角為原點。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1ZvOU4bx-1629718196324)(\asseits\1615453504038.png)]

相對定位不脫離標(biāo)準(zhǔn)流：

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2HagANAB-1629718196325)(\asseits\相對定位.png)]

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

4、絕對定位

脫離標(biāo)準(zhǔn)流。

語法：

選擇器：{ position：absolute; }

1

2

3

4

使用了絕對定位的元素以它最近的一個“已經(jīng)定位”的“祖先元素” 為基準(zhǔn)進行偏移。如果沒有已經(jīng)定位的祖先元素，那么會以瀏覽器窗口為基準(zhǔn)進行定位

絕對定位的元素從標(biāo)準(zhǔn)文檔流中脫離，這意味著它們對其他元素的定位不會造成影響

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-f7Tf9Kt9-1629718196328)(C:\Users\Administrator\Desktop\html_md課件\9、定位\筆記\asseits\絕對定位.png)]

如圖，黃色div是綠色div的父元素，給綠色div加一個absolute屬性，如果綠色div的父元素沒有添加任何定位，那么移動綠色div的坐標(biāo)原點將從瀏覽器的左上角開始，如果綠div的父元素有任意定位，那么以該定位的父元素的左上角原點為標(biāo)準(zhǔn)

代碼：

我是第1個h1標(biāo)簽

我是第2個h1標(biāo)簽

我是第3個h1標(biāo)簽

我是第4個h1標(biāo)簽

我是第5個h1標(biāo)簽

我是第6個h1標(biāo)簽

我是第7個h1標(biāo)簽

我是第8個h1標(biāo)簽

我是第9個h1標(biāo)簽

我是第10個h1標(biāo)簽

我是第11個h1標(biāo)簽

我是第12個h1標(biāo)簽

我是第13個h1標(biāo)簽

我是第14個h1標(biāo)簽

我是第15個h1標(biāo)簽

我是第16個h1標(biāo)簽

我是第17個h1標(biāo)簽

我是第18個h1標(biāo)簽

我是第19個h1標(biāo)簽

我是第20個h1標(biāo)簽

我是第21個h1標(biāo)簽

我是第22個h1標(biāo)簽

我是第23個h1標(biāo)簽

我是第24個h1標(biāo)簽

我是第25個h1標(biāo)簽

我是第26個h1標(biāo)簽

我是第27個h1標(biāo)簽

我是第28個h1標(biāo)簽

我是第29個h1標(biāo)簽

我是第30個h1標(biāo)簽

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

5、絕對定位元素的應(yīng)用

定位元素的原點是會發(fā)生變化的，情況有兩種：

如果定位元素的祖輩元素沒有任意定位，那么定位元素的原點就是就是瀏覽器的左上角。

如果定位元素的祖輩元素有過任意定位，那么定位元素的原點就是以該元素最近的祖輩元素的左上角為原點。

可以新建兩個div，一個outBox，里面放一個inBox，然后在outBox里面不設(shè)置定位，嘗試下設(shè)置inBox定位后的變化。然后給outBox設(shè)置一個定位，然后再看變化

子絕父相

6、做5173的導(dǎo)航條

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3Oyz1lzx-1629718196332)(\asseits\5173.png)]

步驟：

1、建立大的div盒子，寬100% 設(shè)置背景，本次我們用圖片設(shè)置背景

background: url(“img/repeat.png”) 0px -47px; 后面的兩個值直接調(diào)整x軸和y軸，和我們昨天學(xué)習(xí)的background-position: 0px -47px;是一樣的，這里是整合起來的寫法

2、用ul li標(biāo)簽寫，給ul設(shè)置成為版心

3、讓li浮動起來，設(shè)置顏色格式，設(shè)置內(nèi)邊距

4、給li設(shè)置hover,此處的hover顏色也用背景圖片

5、找到“熱”這張圖片，用定位的方法放在指定的位置

6、父親用相對定位，因為這樣不會脫離標(biāo)準(zhǔn)流，子類用絕對定位，這樣可以一次設(shè)置不同的地方可重復(fù)使用。原理就是只要父類設(shè)置了任意定位，那么子類的定位就按照父類的左上角為原點來進行定位

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

7、z-index屬性

層級相同的情況下，越在后面的元素層級越高。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Q8VUKhgj-1629718196333)(\asseits\z-index.png)]

比如說，我們現(xiàn)在同時設(shè)置了1,2,3,4,5個div,如果我們現(xiàn)在給他們設(shè)置了相對定位，此時會脫標(biāo)，所有的div都層疊在了一起，那么第5個在最上面，因為層級一樣的時候，5在后面，程序最后讀到他，所以他在上面。如果想設(shè)置讓2在最上面，就可以給2設(shè)置一個z-index：值，的屬性值。z-index的取值越大，層級越高，取值范圍是正整數(shù)，最大值是2147483647，這個最大數(shù)不需要記，我們工作中只要不是瞎寫，用不了這么大的數(shù)。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

8、選擇器的優(yōu)先級

標(biāo)簽選擇器<類選擇器

當(dāng)多個標(biāo)簽嵌套的時候，分辨優(yōu)先級，可以理解為，一個標(biāo)簽選擇器是1，類選擇器是10，id選擇器是100。多個嵌套時，按照加起來的數(shù)值，大的層級高。

200px;

background-color: rgb(241, 54, 110);

z-index: 1;

}

.e{ width: 100px; height: 100px; background-color: rgb(238, 241, 9); }

1

2

3

4

5

6

8、選擇器的優(yōu)先級

標(biāo)簽選擇器<類選擇器

當(dāng)多個標(biāo)簽嵌套的時候，分辨優(yōu)先級，可以理解為，一個標(biāo)簽選擇器是1，類選擇器是10，id選擇器是100。多個嵌套時，按照加起來的數(shù)值，大的層級高。

web前端

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。