技術標籤：csshtml

為什麼需要定位？

定位可以讓盒子自由地在某個盒子內移動位置或者固定螢幕中某個位置，並且可以壓住其他盒子。標準流或浮動都無法快速實現。

一、定位組成

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

定位=定位模式+邊偏移

定位模式用於指定一個元素在文件中的定位方式。邊偏移則決定了該元素的最終位置。

二、定位模式

用於指定一個元素在文件中的定位方式。

通過CSS的position屬性來設定，有四個值。

1. 靜態定位 static

靜態定位是元素的預設定位方式，無定位的意思。

語法：

選擇器{ position: static; }

靜態定位的特點：

• 靜態定位按照標準流擺放位置，它沒有邊偏移
• 靜態定位在佈局時很少用到

2. 相對定位 relative

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

語法：

選擇器{ position: relative; }

相對定位的特點：

• 它是相對於自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）。
• 原來 在標準流的位置繼續佔有，後面的盒子任然以標準流的方式對待它。（不脫標，繼續保留原來位置）。

3. 絕對定位 absolute

絕對定位是元素在移動位置的時候，是相對於它祖先元素來定位的。

語法：

選擇器{ position: absolute; }
 

絕對定位的特點：

• 如果沒有祖先元素或者祖先元素沒有定位， 則以瀏覽器為準定位。
• 如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先為參考點移動位置。
• 絕對定位不再佔有原來位置。

4. 子絕父相

子級是絕對定位的話，父級要用相對定位。

子絕父相的使用場景：

• 子盒子不佔有位置，可以放到父盒子裡面的任何一個地方，不影響其他兄弟盒子，因此子盒子使用絕對定位。
• 父盒子需要加定位限制子盒子在父盒子內顯示。
• 父盒子佈局時，需要佔有位置，因此父盒子使用相對定位。

總結：子級不需要佔有位置，則是絕對定位，父級需要佔有位置，則是相對定位。

若父元素不需要佔有位置，子絕父絕也會遇到。

案例：將HOT小圖示定位在綠色背景圖的右上角，效果圖如下。

<ul>
    <li>
        <em>
            <img src="images/hot.png" alt="">
        </em>
        <img src="images/pic.png" alt="">
    </li>
</ul>

ul li {
    position: relative;
    float: left;
    width: 228px;
    height: 27px;
    background-color: blue;
}
ul li>img {
    width: 100%;
}
    
.ul li em {
    position: absolute;
    top: 4px;
    right: -4px;
}

5. 固定定位 fixed

固定定位是元素固定於瀏覽器可視區的位置。主要使用場景：可以在瀏覽器頁面滾動時元素的位置不會改變。

語法：

選擇器{ position: fixed; }

固定定位的特點：

• 以瀏覽器的可視視窗為參照點移動元素。
• 跟父元素沒有任何關係。
• 不隨滾動條滾動
• 不再佔有原先位置。

固定定位小技巧：固定在版心右側位置

1. 讓固定定位的盒子left:50%，走到瀏覽器可視區域（也可看做版心）的一般位置。
2. 讓固定定位的盒子margin-left：版心寬度的一般距離。多走版心寬度的一般位置。

<div class="fixed"></div>
<div class="w">版心盒子 800畫素</div>

/* 版心盒子 */
.w {
    width: 800px;
    height: 1400px;
    background-color: pink;
    margin: 0 auto;
}
/* 固定定位盒子 */
.fixed {
    position: fixed;
    /* 1.到瀏覽器一般的寬度 */
    left: 50%;
    /* 2.利用margin 走版心盒子寬度的一般距離 */
    margin-left: 400px;
    width: 50px;
    height: 150px;
    background-color: skyblue;
}

6. 粘性定位 sticky

粘性定位可以被認為是相對定位和固定定位的混合。

語法：

選擇器 { 
    position: sticky; 
    top: 10px;
}

粘性定位的特點：

• 以瀏覽器的可視視窗為參照點移動元素。
• 佔有原先的位置。
• 必須新增top、left、right、bottom其中一個才有效。
• 相容性差，IE不支援。

三、邊偏移

決定了該元素的最終位置。

有top、bottom、left和right 四個屬性。