若是大一學子或者是真心想學習剛入門的小伙伴可以私聊我，若你是真心學習可以送你書籍，指導你學習，給予你目標方向的學習路線，無套路，博客為證。

一、定位

定位分為相對定位以及絕對定位。

相對定位可以理解為在 HTML 中，元素會依照原有的順序進行顯示，通過相對距離（例如左右距離多少）的方式使這些元素進行位置的顯示。

絕對定位可以理解為，在 HTML 中，元素并不會按照有序的方式進行排列，需要依靠自身給予的定位信息決定元素出現在 HTML 頁面中的位置。

1.1 文檔流

我們在了解定位前，需要了解什么是文檔流。

在 HTML 中，默認情況下一個網頁是多個元素從上而下自動進行排列而成，并且是一行一行組成，這些行中的元素則是從左往右默認進行排列，當元素超過其寬度大小則會進行換行，而這就是文檔流。

而定位就是指對某個元素顯示于在文檔流（頁面）中的某個位置，又或使某個元素脫離文檔流進行顯示，而在此所屬的脫離則是表示某元素不存在于文檔流中，具體是如何咱們接下來詳細說明。

1.2 position 屬性

在 HTML 中通過 position 屬性對網頁中的元素進行定位，position 屬性支持以下 5 個值：

static（默認）
relative
absolute
fixed
sticky

在本章開始時，了解了相對定位和絕對定位，而后又了解了 position 定位的屬性值，這些值對應了相對定位和絕對定位，例如：

相對定位的 position 屬性值有 relative
絕對定位的值有 absolute 、fixed 、sticky

其中使用 static 與 relative 定位元素，其元素不會脫離文檔流，因為是相對定位，需要在有序的元素排序中使用相對的定位使其進行排列，而使用 absolute 、fixed 、sticky 定位將會使元素脫離文檔流。這些元素都使用 left、top、right、bottom 進行定位（relative 也使用 left、top、right、bottom 進行定位），其作用如下：

left：距離左側距離多少
top：距離頂部距離多少
right：距離右側距離多少
bottom：距離底部距離多少

1.3 relative

position 屬性為 relative 時，將會根據 left、top、right、bottom 進行定位，例如以下代碼：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文檔流</title><style>div{width: 50%;height: 60px;background-color: black;}.relative {width: 300px;top: 10px;position: relative;background-color: aqua;}</style>
</head>
<body><div></div><div class="relative"></div>
</body>
</html>

以上代碼中定義了 div 的默認寬高，給予了正常 div 容器的背景色為黑色，隨后給予了一個類 relative 為 relative 定位，使用該類后，其定位將會為 relative ；在該類中，重新定義了寬度為 300px，對應的高度則是依舊是整體定義的 div 高度，使用了 top 屬性表示距離頭部距離為 10px，并且給予了淡青色為背景顏色，在頁面中顯示如下：

在這里插入圖片描述
我們可以明顯的看到淡青色的 div 距離頂部有一定的距離，接著咱們在對應的css 中增加 right 屬性：

此時將會看到，在頁面中淡青色的元素將會往左側索入，因為在當前 div 右側無元素，但增加了距離右側的距離，那么此時只會往左側縮入：
在這里插入圖片描述
我們將 right 屬性改為 left，該元素將會距離左側有一定的距離：

其結果如下：

此時我們再將 left 改成 bottom 將會與頂部正常文檔流的 div 發生重疊：

結果如下：
在這里插入圖片描述
此時我們還需要注意使用 relative 時會出現的一個情況：使用 relative 后，即時發生了偏移覆蓋掉了（以上示例情況）其他元素，其本身所占的位置依舊占據，例如如下示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文檔流</title><style>div{width: 50%;height: 60px;background-color: black;}.relative {width: 300px;bottom: 10px;position: relative;background-color: aqua;}</style>
</head>
<body><div></div><div class="relative"></div><div class="relative" style="top: 50px;"></div><div></div></body>
</html>

以上代碼中新增了一個 div，并且使其距離頂部 50px：
在這里插入圖片描述
此時這個div 將會往下移動覆蓋掉下部分的 div，但是其本身的位置還是存在，我們可以通過示例看出：

index-z

在使用絕對定位時，若發生了覆蓋，想使其中一個定位元素現實于另外一個定位元素之上，可以使用 z-index 屬性，該屬性可以更改當前頁面元素的層級，z-index 的屬性值為數字，數字越大則表示層級越大，可以理解層級為覆蓋層數，0最小表示在最下層，數字越大層級越大，層架大的數覆蓋于小的數，此時給該 div 設置 z-index 為 1則會顯示在上層，z-index 的值默認為0：

<body><div class="relative"></div><div class="relative" style="top: 20px;"></div><div class="relative" style="background-color: red;"></div>
</body>

以上代碼為 css 樣式相同時發生了 div 重疊，效果如下：
在這里插入圖片描述
在此時需要第二個 div 不再被紅色覆蓋，可以在樣式中添加 z-index 屬性：

其效果如下：

1.4 absolute 絕對定位

絕對定位是脫離文檔流而存在的，如何脫離咱們可以接下來的示例進行查看。

首先我們需要知道一個點，絕對定位的父元素不能是 static ，也就是 position不能是 static，而 static 是position 的默認值，也就是說直咱們需要一個 div 設置為 relative 后再對其進行子元素設置定位為 absolute：

<style>div{width: 50%;height: 160px;background-color: black;}.relative {width: 600px;position: relative;background-color: aqua;}.absolute{width: 300px;height: 60px;position: absolute;background-color: rgb(255, 0, 128);}
</style><body><div class="relative"><div class="absolute"></div><div class="absolute" style="background-color: rgb(38, 0, 255);"></div></div>
</body>

其頁面效果如下：

在這里插入圖片描述
咱們可以看到，我們設置了兩個 absolute 的 div 元素在頁面中只顯示了第二個背景色為藍色的 div：

其原因是定位為 absolute 定位將會使其元素脫離文檔流，此時兩個元素是進行了重疊，咱們只需要使用 top 這些定位屬性使其顯示即可：
在這里插入圖片描述
顯示效果如下：

如何使用 absolute 將會在之后文章進行講解。

1.5 fixed 固定于窗口的定位

在定位為 fixed 時，該div 將會懸浮于整個文檔流內容之上，例如在瀏覽一些網頁時，某些可視區域（例如導航、搜索、廣告等）將會一直固定于頁面之上，示例如下：

<style>div{width: 50%;height: 160px;background-color: black;}.relative {width: 600px;position: relative;background-color: aqua;}.fixed  {position: fixed ;width: 100%;height: 10px;top: 20px;background-color:rgb(255, 145, 0);}
</style>
<body><div><div class="fixed"></div></div><div class="relative"><div class="absolute" style="background-color: rgb(38, 0, 255);top: 30px;"></div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</body>

此時示例中添加了 fixed ，并且為了使頁面高度高于可視高度，增加了多個div ，其效果如下：
請添加圖片描述
使用了 fixed 定位后，其元素將會固定于頁面之上，而且不管你是否設置 fixed 在何位置，其效果都是一致的，例如：
在這里插入圖片描述
在效果演示中還可以看到，其 absolute 內容覆蓋了 fixed 元素，只需要在 fixed 元素中增加 z-index 屬性即可。

1.6 sticky 可在文檔流中使用

之前使用的 fixed 在文檔流中使用并“無效”，實現這個效果咱們可以使用 sticky，代碼示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文檔流</title><style>div{width: 50%;height: 160px;background-color: black;}.sticky  {position: sticky ;top: 20px;background-color:rgb(0, 0, 0);width: 100%;height: 60px;}span{display:inline-block;width: 100%;color: aliceblue;text-align: center;height: 60px;line-height: 60px;}</style>
</head>
<body><div></div><div></div><div style="height: auto;width: 100%;"><div class="sticky"><span>這里是 sticky 定位內容——《1_bit 的前端課》</span></div><div style="background-color: rgb(17, 175, 69);width: 100%;"></div><div style="background-color: rgb(85, 17, 175);width: 100%;"></div><div style="background-color: rgb(175, 17, 101);width: 100%;"></div><div style="background-color: rgb(175, 146, 17);width: 100%;"></div><div style="background-color: rgb(17, 175, 175);width: 100%;"></div><div style="background-color: rgb(190, 219, 23);width: 100%;"></div><div style="background-color: rgb(175, 17, 114);width: 100%;"></div></div>
</body>
</html>

為了方便顯示我 sticky 定位中添加了 span 并且給予了 span 樣式，在 span 樣式中轉變了其元素類型 display:inline-block;，隨后給予了字體顏色白色、text-align: center;、height: 60px;、line-height: 60px;，其中 text-align: center;使其內容水平居中顯示、height: 60px;設置 span 高度、line-height: 60px;設置其行高，行高與高度相同其內容將會水平居中，最終效果如下：
請添加圖片描述