5xRuby網頁前端設計 CSS Position 課堂筆記
===
###### tags: `5xRuby` `css`
(上課時間：20191215)

※ 定位(Position)：
控制物件在畫面當中要依據誰來做對齊 or 位置的排列 or 定在某個位置上面。

固定定位 Fixed
---
※ 固定定位 `position:fixed;`
* 依據==視窗==來做定位，從資料流抽離，自己獨立一層。
* 未設定上右下左的距離時，他會定在原來物件距離視窗頂端(`top:0;`)及左側(`left:0;`)的預設位置。
* 永遠固定在視窗範圍內(會跟著視窗捲動)。

*當上下左右都有設定值時，物件會依照資料排序正常的方向，以左上角為初始點，故下方和右方的設定將視為無效。

right:100px;  /*此行無效*/
left:100px; 
bottom:100px; /*此行無效*/
top:100px;

→ 上下左右居中寫法(以版面剩餘的空間作排序)：

/*加上這句即可完成上下居中效果*/
margin:auto; /*將剩餘的空間拿來作分配*/ 
right:0; 
left:0; 
bottom:0; 
top:0;

相對定位 Relative
---
※ 相對定位 `position:relative;`
[又可以稱為偏移顯示，不做任何改變時也不影響畫面。]
* 不會從資料流抽離。
* 依據原來資料中的位置做偏移。

:::success
**z-index**：用來決定元素重疊的順序。
* 當兩個元素有重疊情況時，z-index 值將會決定哪一個元素在上面。
* z-index 值大的元素會被放在上面。
:::

絕對定位 Absolute
---
※ 絕對定位 `position:absolute;`
[當上下左右沒有設定距離時會在原本的位置。]
* 一但有設定絕對定位時，會先找父層有無定位（任何一種定位皆可：Fixed/Relative/Absolute），若父層有定位就會停止尋找(只要有一層有設定即可)，但若皆無設定則以==視窗==為定位(而非定在Body上)。位置會在父層以內(border內)。
* 只會定位一次，故不會跟著視窗做捲動。

*使用絕對定位時，要先考慮要把物件定在誰身上，而當不希望父層物件抽離畫面，就寫`position:absolute;`在父層中。

黏貼 Sticky
---
※ `position:sticky;` 它是 relative 及 fixed 兩種 position 的混合。

默認的情況下，元素會被當作 position: relative; ，捲動頁面時元素會跟著父元素一起捲動，但是當元素與視窗的距離小於指定的數值時(例如下列範例是 top: 15px )，元素則會轉換為 position: fixed;，固定黏著( sticky )在指定的數值上，距離不會再縮小。
[* 參考來源](https://medium.com/ui-ux%E7%B7%B4%E5%8A%9F%E5%9D%8A/position-%E5%B1%AC%E6%80%A7%E7%9A%84%E5%9F%BA%E7%A4%8E%E6%A6%82%E5%BF%B5-5931254e5203)

.sidemenu { 
    width: 20%; 
    float: left; 
    padding-top: 15px; 
    position: sticky; 
    top: 15px; 
}