# Position 在 CSS 中，有三種可控制的方式，放置 box \[1] 1. Normal flow 自然排列\[2] 2. `float` 排列\[3] 3. `position` 定位 ### 語法 ```css position: 定位方法 top: 數字 bottom: 數字 left: 數字 right: 數字 ``` * 上下左右的設定用得上再使用 * 定位並不會造成單位變化，所以可以這樣換算 `left` = -`right`, `top` = -`bottom` ## Position定位種類 ### Static 無定位 原本畫面上的 box 會依照 Normal flow 排列。 * `position: staic` 是每個 HTML element 的預設值。 * `position` 設定成這個值時, `top`, `left`, `bottom`, `right` 將不會有任何作用。 ### Relative 相對定位\[4] 原本畫面上的 box 會依照 Normal flow 排列。 假設有個叫 box 的HTML element 設定 `position: relative` 會有什麼影響 * 在 normal flow 佔有的空間，依然佔有。 * 不會影響其它 normal flow 的 HTML Element * 偏移量是相對於在 normal flow 的位置 * 會導致元素重疊 * 在 table 有些跨欄偏移的應用 relative 和 static 其實非常像，但在 relative 的情況下可以使用 `top`,`right`, `bottom`, `left`, `z-index` 且不影響其他 elements 的排列。也就是像下面這個樣子： ![](/files/-MbdYkmGFyVmQ3eyh7k2) 藍色的方塊還以為綠色的方塊還在原本的位置上，但實際上綠色的方塊已經透過 `top`,`right`, `bottom`, `left` 屬性偏移原本的位置了。另一方面，你也會注意到，在 HTML 結構上先出現的綠色方塊，這時候覆蓋在藍色方塊上，這是因為當我們設定 `position: relative` 時，會創造出一個新的 "stacking context"，這個新的 stacking context 出現在原本的 stacking context 之後，所以在 z-index 層級上會變得比較高。 ### Absolute 絕對定位\[4] 原本畫面上的 box 會依照 Normal flow 排列。 假設有個叫 box 的HTML element 設定 `position: absolute` 會有什麼影響 * 跳脫 normal flow 排列規則，不佔有任何空間。 * 不會影響其它 normal flow 的 HTML Element * 偏移量是相對於有「非 `position: static` 」的位置 * box 以內有 normal flow 和 `position: absolute` 的都與 box 相關 * 會導致元素重疊 以下圖為例，白色方塊設定了 `position: relative` ，當綠色方塊設定了 `position: absolute` 要往父層找參考點的時候，就會找到白色方塊，然後因為此時設定 `top: 0; left: 0`，所以就會直接黏在白色方塊的左上角。 ![](/files/-MbdZA8bRUZJzAEkFu5F) 同時你也會發現，因為綠色方塊脫離了原本的排版，所以藍色方塊就當綠色方塊不存在，直接排在紅色方塊後面，跟`position: relative` 的狀況不一樣。 但如果我們忘記在白色方塊設定 `position: relative` 的時候，會發生什麼事情呢？這時候綠色方塊就會一路往上找，找到上一個創造出 stacking context 的 element，也就是 html 上 ![](/files/-MbdZrmI1e_oKc0rY54n) 最後一提的是，不是只能找到 `position: relative` 的 element 才能當作參考點，`position: absolute`, `position: fixed` 也都可以喔。 ### Fixed 可視區的絕對定位\[4] 可視區的絕對定位，唸起來很呦口。我也不知道怎麼翻才好。 這是一種類似絕對定位的定位方式。唯一的區別在於偏移量參考點 * absolute 參考容器(的容器)中，使用「非 static 定位」的容器 * 偏移量是相對於可視區 (viewport) * 每個可視區都會重複 fixed 定位的內容 在內容捲動時，被 `fixed` 的元素會固定不移動。類似固定背景的效果 > 有 Media Query 時，有用到 paged 類型，要注意重複的情況。\ > 每個頁面固定放置簽名，是個很有效的做法。 ``` position: fixed ``` 如果弄清楚了 `position: abosolute` 的特性，那麼要理解 `position: fixed` 就相對簡單多了。不同於 `absolute`，`fixed` 的參考點在 viewport 上，也就是說，它是以使用者可以看到的畫面做為參考點，常見的應用就是，讓一個 element 固定在畫面的某個地方，不會因為畫面滾動而有所改變。 另一個有趣的事情是，如果我們要將網頁印成文件，那麼這個 `fixed` 的 element 會出現在每一頁的同一個位置上。 ### Sticky 滾動黏滯定位\[4] `sticky` 是一種類似 `relative` 的定位方式，偏移量是參考有 scroll 的容器或者是 可視區 (viewport)。 * 保留原有 normal flow 所佔用的空間 * `sticky` 元素的活動範圍界於 sticky-constraint rectangle 四邊裡面與容器四邊裡面，若之間的空間小於`sticky` 元素，則`sticky` 元素被捲出容器四邊 * 偏移量，捲動到離各邊多少，單位使用百分比，其 100% 是該方向容器的尺寸 * element 滾到上下邊界時， margin 會 margins collapse ``` position: sticky ``` 根據 MDN 上的說明，`sticky` element 不會脫離原本的排版流，跟 `relative` 有點像，但是會黏在最近的 "scrolling ancestor" 上。 什麼是 "scrolling ancestor" 呢？可以想像創造出可滾動的父層元素，像是有設定 overflow 的 elements，或者是，整個 html 文件本身。 知道什麼是 scrolling ancestor 之後，`sticky` element 的行為就是： * 在還沒有碰到 scrolling ancestor，就像是 `position: relative` 一樣 * 在碰到 scrolling ancestor 後，就像是 `position: absolute` 一樣，位置會固定在相對於參考點的絕對位置上，而這個參考點就是 scrolling ancestor。 舉下面的例子，container 當中的 elements 高度遠大於 container 的高度，因為有設定 `overflow` 因此產生滾動效果。對於有設定 `position: sticky` 的綠色方塊來說，使用者一路往下滑、綠色方塊往上跑的時，當綠色方塊碰到 scrolling ancestor，也就是 container 的時候，就會「黏在」他上面。當然「黏的」的位置，可以透過 `top`, `right`, `bottom`, `left` 來決定。 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://information9527.gitbook.io/html/2.css/position.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.