CSS定位的一些個人理解
本人是還沒有入門的技術小白，僅以此篇記錄成長，歡迎大家一起討論學習，也歡迎在評論區指出問題~~
言歸正傳啦，以下是關於CSS中定位的個人理解。
一、分類
在CSS中定位分爲：static靜止定位、relative相對定位、absolute絕對定位、fixed固定定位、inherit繼承定位。本文主要討論相對定位，絕對定位與固定定位。
二、應用
（1）相對定位
相對自己的原始位置定位
就是在沒添加定位前，它已經佔了一個位置了，應用相對定位後，是相對於它本來該在的位置上下左右移動。但是它之前的位置還是給它留着的。之前看到有人給相對定位比喻成進城打工的人，雖然進城了，但是老家還是有房子的，不會因爲人進城打工，老家的房子就沒了。下面引入代碼，大家可以運行一下感受相對定位。
先做一些準備
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
*{
margin: 0;/*去掉系統自帶的一些邊距*/
padding: 0;
}
.big{/*爲了看上去比較直觀，我們定義了一個大盒子和小盒子*/
width: 1000px;
height:1000px;
background-color: gray;
}
.small{
width: 300px;/*定義一個邊長爲300像素的黃色小正方形*/
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="big">
<div class="small">
</div>
</div>
</body>
</html>
沒加定位之前是醬紫的
現在我們給黃色小正方形加入相對定位
.small{
width: 300px;/*定義一個邊長爲300像素的黃色小正方形*/
height: 300px;
background-color: yellow;
position: relative;/*注意這裏啦*/
top:20px;
left: 20px;
}
運行出來是這樣的啦可以看出相對於原來的位置挪動啦
（2）絕對定位
相對於最近的非static 定位的祖先元素定位
這聽上去有點繞，難懂。首先，絕對定位是相對於祖先元素定位，祖先元素就是父元素，爺爺元素，太爺爺元素等等等等啦，總之就是上一級元素，在說相對定位的時候，灰色盒子就是黃色盒子的父元素。再者，這個祖先元素是非static的定位元素，那麼就是說祖先元素要有定位，還不能是static定位，那我們可能會疑惑了，如果父元素沒有定位怎麼辦？？答案是找爺爺，也就是上級元素沒有定位，就找上上級，那我們可能又有疑惑了，如果祖先元素都沒有定位，那怎麼辦丫!!!答案是相對於body定位。這裏要說一下，絕對定位之後，原來的位置就沒有了，就像去城裏打工的人賺錢了，舉家搬遷到城裏。
所以，現在情況很明朗了，絕對定位分爲兩種情況
1、祖先元素有定位（子絕父相）
2、祖先元素沒定位
先說第一種,在祖先元素有定位時，我們最常用的是子絕父相，及兒子是絕對定位，父親是相對定位。
給之前的灰色大盒子添加相對定位，黃色盒子添加絕對定位
.big{/*爲了看上去比較直觀，我們定義了一個大盒子和小盒子*/
width: 1000px;
height:1000px;
background-color: gray;
position: relative;/*這裏這裏*/
top: 100px;
left:150px;
}
.small{
width: 300px;/*定義一個邊長爲300像素的黃色小正方形*/
height: 300px;
background-color: yellow;
position: absolute;/*這裏這裏*/
top:20px;
left: 20px;
}
就是這亞子的效果啦，小盒子始終是和大盒子保持相應的距離。
下面說祖先元素沒有定位
.big{/*爲了看上去比較直觀，我們定義了一個大盒子和小盒子*/
width: 1000px;
height:1000px;
background-color: gray;
/*position: relative;
top: 100px;
left:150px;*/
margin-top: 100px;/*這裏加了邊距是爲了更直觀的看出，小盒子不再是相對於大盒子定位了*/
margin-left: 100px;
}
.small{
width: 300px;/*定義一個邊長爲300像素的黃色小正方形*/
height: 300px;
background-color: yellow;
position: absolute;
top:20px;
left: 20px;
}
這裏可以看出黃色方塊不再根據灰色方塊定位了，而好像是相對於瀏覽器左上角，其實嚴格來說並不是相對於瀏覽器，而是相對於body，相對於body要如何去理解呢，比如說一個文檔，很長很長，瀏覽器中我們肯定是要藉助於滾動條來瀏覽的，因爲瀏覽器的窗口那麼大，我們說的body就是瀏覽器裏的文檔，也可以說是文檔裏的內容。我們看到的關於左上角定位，其實也不是固定的，當我們把posision的值修改成bottom:20px;right:20px;就會變成右下角。
（3）固定定位
相對於瀏覽器（屏幕視口）定位
這裏就是可能會容易和絕對定位的第二種情況混淆，其實區別是很大很大的，上面也說過了，絕對定位第二種情況是相對於內容，而固定定位是確確實實的相對於瀏覽器窗口。那麼這種所帶來的區別在視覺上會產生什麼樣的差異呢，就是絕對定位第二種情況會隨着內容的滾動而滾動，但是固定定位不會，瀏覽器窗口就那麼大，它就固定在那不動，不論內容滾動到哪兒，最形象的例子是屏幕底下的小廣告，不管你內容翻到哪，它就像狗皮膏藥一樣賴在那。
這裏主要說和絕對定位的區別，因爲是動態的所以不發運行結果圖啦~給大家一段代碼，大家可以運行之後自行體會~
運行之後要滑動滾動條哦~~
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
*{
margin: 0 ;
padding: 0;
}
body{
width: 1000px;
height: 5000px;
}
.big{/*爲了看上去比較直觀，我們定義了一個大盒子和小盒子*/
width: 1000px;
height:1000px;
background-color: gray;
position: absolute;
top: 100px;
left:150px;
}
.small{
width: 300px;/*定義一個邊長爲300像素的黃色小正方形*/
height: 300px;
background-color: yellow;
position: fixed;
bottom:20px;
right: 20px;
}
</style>
</head>
<body>
<div class="big">
</div>
<div class="small">
</div>
</body>
</html>
好啦~~定位就分享到這，其他類型的定位用的不多，所以就不贅述啦~
希望這篇文章可以幫助到大家，也希望自己可以逐漸成長起來~
本文如果有任何問題，歡迎評論區討論交流~