html元素的定位類型分為：固定定位、相對定位、絕對定位和粘性定位
在網頁布局中，我們可以通過很多中方式來控制頁面布局，比如表格布局、flex彈性布局以及浮動布局。
但是在這些方法中，我們可能用到了一些輔助技術，那就是定位。
元素的定位，用得好，就會帶來事半功倍的效果，但是一不小心也會給自己挖坑，自己踩坑。
這就需要我們了解各種定位類型中的行為了。
我們給元素設定定位，是通過position屬性來設定的，它預設的屬性值是static，也就是靜态定位，元素未被定位。
我們常用的幾種布局方式，都是通過控制文檔的方式，來實作我們想要的效果。然而定位則不同，定位是把元素脫離文檔流，這樣就導緻被定位的元素可以與其他元素重疊。
固定定位
給元素設定固定定位：
div{
position: fixed;
} 再通過top、left、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>Document</title>
<style>
.hhh {
position: fixed;
top: 2rem;
left: 2rem;
right: 2rem;
bottom: 2rem;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="hhh"></div>
</body>
</html> 如以上代碼中，元素div并沒有設定具體的寬高。但是效果如圖：
那麼在平常的頁面布局中，常常使用來固定定位來實作：模态框、懸浮菜單或者懸浮導航等等效果。
絕對定位
決定定位，是相對于最近的祖先定位元素。同樣的，屬性top、right、bottom和left決定了元素的邊緣位置。
經常和相對定位搭配使用。
相對定位
相對定位，是一個比較容易混淆的定位，因為我們給元素設定相對定位後，在頁面中沒有任何的視覺變化，相對定位的元素和它周圍的元素，保持着原本的位置。
就算是設定top、left和right、bottom，效果也僅僅是将相對定位的元素移動位置，其他元素依舊沒有變化。這樣我們就可以認為相對定位，并沒有讓元素脫離目前文檔流，元素依舊占據文檔流中的位置。
小提示：
相對定位中的top、right、bottom和left屬性并不能改變元素的大小，它們僅僅改變元素的位置。另外，top和bottom不能同時使用，因為bottom會被忽略，同樣left和right也不能同時使用，因為right會被忽略。
我們在頁面布局中，常常使用相對定位來給它的子元素的絕對定位建立一個包含塊。
重疊和z-index
在使用定位的時候，經常會出現元素重疊或者元素移動到浏覽器視口之外。
元素移動到視口之外，這個好了解，但是元素重疊，就不太容易找到本質原因了。
可能在面試時，我們常常給的答案是元素設定定位後，可能導緻它脫離文檔流，它和周邊的元素就不處在同一個層次，就導緻在視覺出現重疊的效果。
實質上是，浏覽器在将html解析為DOM的同時，還建立了一個樹形結構，叫做渲染樹，它表示每一個元素的視覺樣式和位置，同時決定了浏覽器繪制元素的順序。
通常情況下。元素在html裡面出現的順序決定了繪制順序，這時，突然有個元素被設定定位了，浏覽器先繪制非定位元素，所有的定位元素最後才繪制，這樣就導緻元素的順序錯亂而産生了重疊現象。
盡管出現重疊現象，我們可以通過設定z-index，來控制元素的層疊順序。
粘性定位
粘性定位是相對定位和固定定位的結合體，通常情況下，元素是會随着頁面滾動的，當達到螢幕的某個位置的時候，元素就固定在該位置。常見就是側邊欄、客服彈窗。
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)