零基础学前端之定位
1、定位
把元素根據我們需要放在指定的位置，即定位。
以上效果，標準流或浮動都無法快速實現，此時需要定位來實現。
所以︰
-
浮動可以讓多個塊級盒子一行沒有縫隙排列顯示，經常用于橫向排列盒子。
-
定位則是可以讓盒子自由的在某個盒子內移動位置或者固定屏幕中某個位置，并且可以壓住其他盒子。
定位:將盒子定在某一個位置，所以定位也是在擺放盒子，按照定位的方式移動盒子。
定位模式通過css樣式的position屬性來進行設置，有四個取值：
| static | 靜態定位 |
| relative | 相對定位 |
| absulute | 絕對定位 |
| fixed | 固定定位 |
2、固定定位
脫離標準流，把元素固定到指定的頁面位置，不論瀏覽器上下怎么翻動，被固定的元素隨著瀏覽器的滾動而滾動，就像你看到的討厭的廣告一樣，不論你怎么翻頁，他一直在哪里。
語法：
選擇器{position:fixed }寫完上述屬性值以后，可以直接設置top值，或left，right，bottom值，這些值就是以頁面左上角為圓點上左右下的距離。如果想在右下，就設置bottom：0；right:0;這種直接下上下左右的屬性后面賦值，只對定位起作用。
主要用于頁面廣告
例：
? .box{
width: 200px;
height: 200px;
background-color: red;
position: fixed;
/top: 80px;/
left: 0;
bottom: 0;
/right: 80px;/
? }
元素的位置相對于瀏覽器窗口是固定位置，即固定在在瀏覽器上，即使窗口是滾動的它也不會移動
Fixed定位使元素的位置與文檔流無關，因此不占據空間
如圖，給綠色的div添加固定定位后，不會隨著屏幕的滾動而發生變化，綠色的div固定在了圖中的位置
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-d9eqXNoK-1629718196321)(\asseits\固定定位.png)]
代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.fix{width: 200px;height: 400px;background-color: green;position: fixed;left: 800px;top: 100px;}</style> </head> <body><div class="fix"></div><h1>我是第1個h1標簽</h1><h1>我是第2個h1標簽</h1><h1>我是第3個h1標簽</h1><h1>我是第4個h1標簽</h1><h1>我是第5個h1標簽</h1><h1>我是第6個h1標簽</h1><h1>我是第7個h1標簽</h1><h1>我是第8個h1標簽</h1><h1>我是第9個h1標簽</h1><h1>我是第10個h1標簽</h1><h1>我是第11個h1標簽</h1><h1>我是第12個h1標簽</h1><h1>我是第13個h1標簽</h1><h1>我是第14個h1標簽</h1><h1>我是第15個h1標簽</h1><h1>我是第16個h1標簽</h1><h1>我是第17個h1標簽</h1><h1>我是第18個h1標簽</h1><h1>我是第19個h1標簽</h1><h1>我是第20個h1標簽</h1><h1>我是第21個h1標簽</h1><h1>我是第22個h1標簽</h1><h1>我是第23個h1標簽</h1><h1>我是第24個h1標簽</h1><h1>我是第25個h1標簽</h1><h1>我是第26個h1標簽</h1><h1>我是第27個h1標簽</h1><h1>我是第28個h1標簽</h1><h1>我是第29個h1標簽</h1><h1>我是第30個h1標簽</h1> </body> </html>3、相對定位 -重要
相對定位是元素在移動位置的時候，是相對于它原來的位置來說的
以自我為中心，自戀型選手
不脫離標準流，會隨著瀏覽器的滾動而滾動。設置完定位以后，元素會隨著設置的值發生變化，但是最初所占的位置還在，不會被下面元素頂上去
語法：
選擇器：{position：relative;}如果只對相對定位設置定位值，那么參照的原點是元素本身的左上角為原點。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1ZvOU4bx-1629718196324)(\asseits\1615453504038.png)]
相對定位不脫離標準流：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2HagANAB-1629718196325)(\asseits\相對定位.png)]
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>相對定位</title><style>*{margin: 0;padding: 0;}.a{width: 100px ;height: 200px;/* margin: 40px; */background-color: rgb(235, 92, 92);position: relative;top: 100px;left: 100px;}.b{width: 100px ;height: 200px;/* margin: 40px; */background-color: rgb(113, 226, 21);float: left;border: 1px solid black;}</style> </head> <body><div class="a"></div><div class="b"></div><div class="b"></div> </body> </html>4、絕對定位
脫離標準流。
語法：
選擇器：{position：absolute; }使用了絕對定位的元素以它最近的一個“已經定位”的“祖先元素” 為基準進行偏移。如果沒有已經定位的祖先元素，那么會以瀏覽器窗口為基準進行定位
絕對定位的元素從標準文檔流中脫離，這意味著它們對其他元素的定位不會造成影響
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-f7Tf9Kt9-1629718196328)(C:\Users\Administrator\Desktop\html_md課件\9、定位\筆記\asseits\絕對定位.png)]
如圖，黃色div是綠色div的父元素，給綠色div加一個absolute屬性，如果綠色div的父元素沒有添加任何定位，那么移動綠色div的坐標原點將從瀏覽器的左上角開始，如果綠div的父元素有任意定位，那么以該定位的父元素的左上角原點為標準
代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}h1{width: 272px;margin: 0 auto;}.out{width: 200px;height: 200px;background-color: rgb(241, 148, 7);position: relative;margin: 0 auto; }.fix{width: 80px;height: 200px;background-color: green;position: absolute;left: 80px;top: 100px;}</style> </head> <body><div class="out"><div class="fix"></div></div><h1>我是第1個h1標簽</h1><h1>我是第2個h1標簽</h1><h1>我是第3個h1標簽</h1><h1>我是第4個h1標簽</h1><h1>我是第5個h1標簽</h1><h1>我是第6個h1標簽</h1><h1>我是第7個h1標簽</h1><h1>我是第8個h1標簽</h1><h1>我是第9個h1標簽</h1><h1>我是第10個h1標簽</h1><h1>我是第11個h1標簽</h1><h1>我是第12個h1標簽</h1><h1>我是第13個h1標簽</h1><h1>我是第14個h1標簽</h1><h1>我是第15個h1標簽</h1><h1>我是第16個h1標簽</h1><h1>我是第17個h1標簽</h1><h1>我是第18個h1標簽</h1><h1>我是第19個h1標簽</h1><h1>我是第20個h1標簽</h1><h1>我是第21個h1標簽</h1><h1>我是第22個h1標簽</h1><h1>我是第23個h1標簽</h1><h1>我是第24個h1標簽</h1><h1>我是第25個h1標簽</h1><h1>我是第26個h1標簽</h1><h1>我是第27個h1標簽</h1><h1>我是第28個h1標簽</h1><h1>我是第29個h1標簽</h1><h1>我是第30個h1標簽</h1> </body> </html>5、絕對定位元素的應用
定位元素的原點是會發生變化的，情況有兩種：
如果定位元素的祖輩元素沒有任意定位，那么定位元素的原點就是就是瀏覽器的左上角。
如果定位元素的祖輩元素有過任意定位，那么定位元素的原點就是以該元素最近的祖輩元素的左上角為原點。
可以新建兩個div，一個outBox，里面放一個inBox，然后在outBox里面不設置定位，嘗試下設置inBox定位后的變化。然后給outBox設置一個定位，然后再看變化
子絕父相
6、做5173的導航條
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3Oyz1lzx-1629718196332)(\asseits\5173.png)]
步驟：
1、建立大的div盒子，寬100% 設置背景，本次我們用圖片設置背景
? background: url(“img/repeat.png”) 0px -47px; 后面的兩個值直接調整x軸和y軸，和我們昨天學習的background-position: 0px -47px;是一樣的，這里是整合起來的寫法
2、用ul li標簽寫，給ul設置成為版心
3、讓li浮動起來，設置顏色格式，設置內邊距
4、給li設置hover,此處的hover顏色也用背景圖片
5、找到“熱”這張圖片，用定位的方法放在指定的位置
6、父親用相對定位，因為這樣不會脫離標準流，子類用絕對定位，這樣可以一次設置不同的地方可重復使用。原理就是只要父類設置了任意定位，那么子類的定位就按照父類的左上角為原點來進行定位
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>5173導航條</title><style>*{margin: 0;padding: 0;}.box{width: 100%;height: 35px;background-color: #3a83e8;margin: 50px 0;}.clearfix{clear: both;content: "";display: block;}.container{width: 70%;height: 35px;margin: 0 auto;}.container li{list-style: none;float: left;padding: 0 10px;line-height: 35px;font-size: 15px;font-weight: bold;color: white;position: relative;}#top1{background-color: #165fc1;}.container li:hover{background-color: #165fc1;}img{position: absolute;top: -16px;left: 49px;}</style> </head><body><div class="box"><ul class="container clearfix"><li id="top1">首頁</li><li>金幣交易</li><li>帳號交易</li><li>裝備交易</li><li>手游交易<img src="img/sy_hot.png" alt=""></li><li>游戲代練<img src="img/sy_hot.png" alt=""></li><li>點卡交易</li><li>帳號租賃<!-- <img src="img/sy_hot.png" alt=""> --></li><li>游戲陪玩<!-- <img src="img/sy_hot.png" alt=""> --></li></ul></div> </body></html>7、z-index屬性
層級相同的情況下，越在后面的元素層級越高。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Q8VUKhgj-1629718196333)(\asseits\z-index.png)]
比如說，我們現在同時設置了1,2,3,4,5個div,如果我們現在給他們設置了相對定位，此時會脫標，所有的div都層疊在了一起，那么第5個在最上面，因為層級一樣的時候，5在后面，程序最后讀到他，所以他在上面。如果想設置讓2在最上面，就可以給2設置一個z-index：值，的屬性值。z-index的取值越大，層級越高，取值范圍是正整數，最大值是2147483647，這個最大數不需要記，我們工作中只要不是瞎寫，用不了這么大的數。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div{position: absolute;}.a{width: 500px;height: 500px;background-color: rgb(241, 54, 54);}.b{width: 400px;height: 400px;background-color: rgb(160, 241, 54);/* z-index: 2; */}.c{width: 300px;height: 300px;background-color: rgb(54, 141, 241);z-index: 1;}.d{width: 200px;height: 200px;background-color: rgb(241, 54, 110);z-index: 1;}.e{width: 100px;height: 100px;background-color: rgb(238, 241, 9);}</style> </head> <body><div class="a"></div><div class="b"></div><div class="c"></div><div class="d"></div><div class="e"></div> </body> </html>8、選擇器的優先級
標簽選擇器<類選擇器<id選擇器
當多個標簽嵌套的時候，分辨優先級，可以理解為，一個標簽選擇器是1，類選擇器是10，id選擇器是100。多個嵌套時，按照加起來的數值，大的層級高。
200px;
background-color: rgb(241, 54, 110);
z-index: 1;
}
8、選擇器的優先級
標簽選擇器<類選擇器<id選擇器
當多個標簽嵌套的時候，分辨優先級，可以理解為，一個標簽選擇器是1，類選擇器是10，id選擇器是100。多個嵌套時，按照加起來的數值，大的層級高。
總結
- 上一篇： 4、表单和高级选择器
- 下一篇： HTML5新增属性