CSS定位

【CSS教學】Day11 – CSS定位到底有什麼用?你知道定位的重要嗎? (詳細解說)

CSS 教學中 CSS 定位應該可以說是最重要的部分,但是你要先想想為什麼需要學習 CSS 定位就算我小青跟你說這個定位很重要,我想你也不知道它會用在哪裡以及為什麼那麼重要對吧! 一定是 CSS 開發者知道了某一些困難點需要被解決,才創造了 CSS 定位,定位有哪些種類呢? 以及定位的使用場景是什麼? 這是本章我們需要來探討的重點,希望你能透過本篇文章對 CSS 定位有更進一步的了解。

  • CSS 定位是什麼?
  • CSS 定位的使用場景時機是什麼?
  • CSS 定位的種類有哪些呢?
  • 為什麼需要定位?
點我瞭解 小青如何每月多賺5位數台幣

CSS 定位是什麼?

CSS教學 CSS定位是什麼

CSS 定位的定義是將盒子模型固定在網頁中某一個你指定的位置,所以定位也是在擺放盒子模型而已,最大的特點是會依照你定位的方式移動盒子模型,CSS 定位最好使用的時機與重點如下列表所示。

  • 需要固定盒子模型在網頁中,滾輪筒移動還定住時,請使用 CSS 定位
  • 需要固定子級盒子模型,在父級盒子模型中任意位置,請使用 CSS 定位
  • CSS 定位特色一定在所有圖層中的最上方顯示

以上就是最好判斷你需不需要使用 CSS 定位的使用時機,以及 CSS 定位是什麼,我想你應該很明白了吧! 講明白點 CSS 定位也是在佈局網頁中經常會去使用的一種方式。

為什麼需要 CSS 定位?

CSS教學 為什麼需要CSS定位

要使用 CSS 定位前我們要先停下來好好思考,並先運用之前學習的標準流 ( 地面人 ) 以及浮動 ( 空中人 ) 試著想想能夠讓某個元素在盒子模型中自由移動嘛? 你可能會問我說自由是多自由呢? 就是能讓你自由移動到盒子模型中任意位置處,而且移動的那一個元素是在父級盒子模型標籤的最上方顯示,並不會被其他盒子模型給壓住顯示不了。

我想你想破頭還是想不出來浮動以及標準流怎麼做出來這樣的效果吧! 如果你做得出來你也寫了一大堆 HTML + CSS 代碼,這裡前提是你不能使用 JavaScript,如果你學會 CSS 定位一定很輕鬆就能夠搞定了。

第二個場景是如果你想要讓一個盒子模型窗口固定顯示在一個固定地方,當你滾動滑鼠時那一個窗口是定在固定的地方不會跟著視窗移動,你要怎麼使用標準流或是浮動做出這樣的效果呢? 你花點時間想想看並運用之前所學的知識點嘗試看看你做得出來嘛? 我想幾乎不太可能吧!

這邊舉例的兩個案例,你運用之前所學的知識點幾乎做不出來,不信你自己可以試試看,CSS 開發者也知道這問題,所以才創造了 CSS 定位屬性專門用來處理這樣的需求,如果你有這樣的需求只要調用該 CSS 屬性就能夠很輕鬆的解決前面兩個你做不出來的案例,這也是為什麼我們需要 CSS 定位的關係唷!

這也是因為我們有所需求才去學習浮動,因為就是要讓盒子並排顯示在網頁上,如果你不需要盒子模型並排顯示你又為什麼需要學習浮動呢? 我說的沒錯吧! 那現在需求就是要讓某個元素在某個盒子模型中任意移動位置,所以才開始學習 CSS 定位,為了達成更多網頁的佈局方式以及排版

  • CSS 浮動可以讓多個塊級元素,一行沒有縫隙並排顯示
  • CSS 定位可以讓某元素在網頁上,任意選擇固定位置

CSS 定位是由那些部分所組成?

CSS教學 CSS定位是由那些部分所組成

經過前面一輪的介紹,相信你應該心裡有一些基礎的 CSS 定位概念了,在這一節我們來討論定位是由那些部分那些東西所組成的,其實不用太過於擔心說有很多東西所組成,就只是定位等於,定位模式加上邊偏移。

  • 定位 = 定位模式 + 邊偏移

你可能會說真的是很簡單就只有這兩項,但是這兩個名詞還是聽不懂呀! 沒關係我們在分別來介紹一下,這裡個專有名詞是什麼吧!

  • 定位模式 : 用於指定一個元素在文檔中的定位方式
  • 邊偏移 : 能決定該元素的最終位置

如果還是真的不是很明白,接下來小青我會專門來好好介紹一下什麼是定位模式、什麼是邊偏移。

點我瞭解 小青如何每月多賺5位數台幣

CSS定位 : 定位模式是什麼?

CSS教學 CSS定位 定位模式是什麼

前面我們有提到,定位模式是用在指定一個元素在文檔中的定位方式,那怎麼定這個方位呢? 這是重點吧! 沒錯定位模式它是通過 CSS 的 position 屬性來進行設置,其中 CSS 屬性值可以分成 5 個方式唷!

CSS定位屬性值定位屬性值意思
static靜態定位
relative相對定位
absolute絕對定位
fixed固定定位
sticky黏性定位
  1. 靜態定位 ( static )
  2. 相對定位 ( relative )
  3. 絕對定位 ( absolute )
  4. 固定定位 ( fixed )
  5. 黏性定位 ( sticky )

以上就是最常用的 5 種定位方式,當然你可能還會看見別人說有黏性定位 ( sticky ) 這一個其實現在才剛開始慢慢普及,你也知道了其實 CSS 定位只是一個統稱唷! 真正我們實際在開發都在看實際情況使用這 5 種定位方式,當然每個都可以使用但效率會個不同要看你用在什麼地方,後面我會專門各開一小節來好好介紹這幾種定位模式以及他們的語法和該注意的點。

那我們在回過頭去看當初那句話定位模式是用於指定一個元素在文檔中的定位方式,現在是不是很清楚是哪幾種定位方式了吧!

  1. 靜態定位 ( static )
  2. 相對定位 ( relative )
  3. 絕對定位 ( absolute )
  4. 固定定位 ( fixed )
  5. 黏性定位 ( sticky )

CSS定位 : 邊偏移是什麼?

CSS教學 CSS定位 邊偏移是什麼

那前面我們知道了有 5 種定位模式方式能夠使用,但是要怎麼移動呢?! 只知道模式是還不夠的,最終我們需要給模式一個值對吧! 這個值叫做邊偏移邊偏移就是定位盒子模型移動到最終位置,其中也是有 4 個屬性值可以去使用,top、bottom、left、right,要記住這 4 個值跟我們之前所學的盒子模型的內邊距與外邊距不太一樣唷! 此話怎麼說呢? 我們看下面表格你會懂的,是可以給這 4 個值進行數值調整。

邊偏移屬性範例邊偏移描述
toptop: 50;頂部偏移量,定義元素在父級元素的上邊緣處
bottombottom: 50;底部偏移量,定義元素在父級元素的下邊緣處
leftleft: 50;左側偏移量,定義元素在父級元素的左邊緣處
rightright: 50;右側偏移量,定義元素在父級元素的右邊緣處

有看到 4 個方位後面都可以加數值,這就是表示你能夠去控制某一個子級元素盒子在父級盒子模型中,任意的移動位置所以你需要重點記住,先選定好方位移動多少距離才能夠移動子級盒子模型唷!

CSS 定位組成部分總結

CSS教學 CSS定位組成部分總結

我們已經了解了 CSS 定位的一些基本知識,你也知道定位其實是由兩個部分所組成的,定位模式以及邊偏移,一個有 5 種定位模式、一個有 4 種方法,你還記得有哪些嗎? 以及分別怎麼使用呢? 現在你還不需要知道這 5 種定位模式具體的使用方法,沒有關係只要先知道有這東西就可以了,到了後面章節才會開始介紹,然後你要知道邊偏移到底是有哪 4 個方位,方位值還可以帶屬性去加以控制 。

  • 定位 = 定位模式 + 邊偏移
  • 定位模式你能說出有哪 4 種模式嗎?
  • 邊偏移你能說出哪 4 個方位嗎?
  • 邊偏移的方未能帶數值去控制元素盒子模型嗎?
點我瞭解 小青如何每月多賺5位數台幣

CSS 靜態定位 ( static ) 是什麼?

CSS教學 CSS靜態定位static是什麼

靜態定位 ( static ) 你只要了解有這個定位就可以了,為什麼呢? 因為其實靜態定位 ( static ) 是元素的默認定位方式,也就是說你沒有指定定位模式的時候,系統會自動默認這種方式,而這種方式其實是有名稱的稱為靜態定位 ( static ),簡單來說其實就是無定位的意思。

靜態定位 ( static ) 語法使用規則

CSS教學 靜態定位static語法使用規則
元素選擇器 { postion: static; }

只要你給你指定的元素,加入CSS 靜態定位 ( static ) 就會變成無定位,那要注意變成靜態定位 ( static ) 模式的時候需要注意以下幾點

  • 靜態定位 ( static ) 是按照標準流特性進行擺放
  • 靜態定位 ( static ) 沒有邊偏移,所以不能設定方位移動
  • 靜態定位 ( static ) 在實際佈局很少使用
  • 靜態定位 ( static ) 可以說就是標準流

CSS 相對定位 ( relative ) 是什麼?

CSS教學 CSS相對定位relative是什麼

相對定位 ( relative ) 就是元素標籤在移動位置的時候,需先考慮自身位置在何處,才開始計算你要移去哪裡,也就是說原本盒子模型標籤訂好位置後,如果賦予相對定位 ( relative ) CSS 定位屬性後,會以自我為中心當作起始點

相對定位 ( relative ) 語法使用規則

CSS教學 相對定位relative語法使用規則
元素選擇器 { postion: relative; }

只要你給你指定的元素,加入CSS 相對定位 ( relative ) 就必須以當前的元素盒子模型自我為中心,開始計算你要移動多少邊偏移,那要注意變成相對定位 ( relative ) 模式的時候需要注意以下幾點。

  • 相對定位 ( relative ) 是自我為中心的定位模式,只以自身為優先 ( 當起始點 )
  • 相對定位 ( relative ) 的邊偏移相對於在元素盒子模型加上 X 軸、Y 軸
  • 相對定位 ( relative ) 在實際佈局用的很兇 ( 用很多 )
  • 相對定位 ( relative ) 就算移動了,其他盒子不能佔用它原本空間!
點我瞭解 小青如何每月多賺5位數台幣

CSS 絕對定位 ( absolute ) 是什麼?

CSS教學 CSS絕對定位absolute是什麼

絕對定位 ( absolute ) 的定位方式也是非常重要,在實際開發過程中很常去使用,它的定位方式是元素在進行移動位置的時候,是會考慮它的祖先在何處,你可能會想說祖先? 意思是說子盒子模型標籤的上級,像是父級子盒子標籤或是爺級以及子標籤,這就是所謂的祖先,也就是說在使用絕對定位 ( absolute ) 的時候會先去看上一級父級元素唷!

絕對定位 ( absolute ) 語法使用規則

CSS教學 絕對定位absolute語法使用規則
元素選擇器 { postion: absolute; }

只要你給你指定的元素,加入 CSS 絕對定位 ( absolute ) 就會變成無定位,那要注意變成靜態定位 ( static ) 模式的時候需要注意以下幾點。

  • 絕對定位 ( absolute ) 是會先去看有沒有父級元素
  • 絕對定位 ( absolute ) 如果沒有父級元素會以瀏覽器為定位<body>
  • 絕對定位 ( absolute ) 去看有父級元素但是父級元素沒有使用定位模式,也是沒用
  • 絕對定位 ( absolute ) 要先看父級元素有定位模式後,才會把父級元素當參考點
  • 如果在祖先當中,父親元素沒有定位模式,會看爺爺有沒有定位 ( 爺爺有就參考爺爺 )
  • 如果爺爺有定位模式、爸爸也有定位模式,會只參考子元素標籤的最近一級有定位模式的
  • 絕對定位是會脫離標準流的,飛的比浮動還要高,後面的盒子會自動補上原本空間

CSS 定位有好幾種,使用場景是什麼?

CSS教學 CSS定位有好幾種使用場景是什麼

是不是你會覺得說定位有那麼多種類,小青你都說很重要但是有沒有一個判斷準則說,我該用在哪裡呢? 還有使用的時機是什麼呀? 不然學那麼多定位好像有是沒用呀!

  • 絕對定位和相對定位到底有什麼使用場景呢?
  • 使用絕對定位一定會先去看上一級是否有相對定位呢?

其實你只要搞清楚弄明白子級元素是絕對定位父級元素一定是相對定位,把這一大坨名詞濃縮就是子絕父相,只要弄清楚他們的關係由來,才能夠了解決對定位以及相對定位的使用場景。

子絕父相的由來是什麼?

CSS教學 子絕父相的由來是什麼

首先你到某些電商網站,你很容易看見一種佈局會一直自動播放圖片商品的區塊,那一個輪播圖是由一個大型區塊盒子模型所組成的,在裡頭的圖片是不是都跟大盒子模型是一樣大的沒錯吧! 但你會發現會有兩個按鈕,分別是左按鈕和右按鈕,那這按鈕也是由盒子模型所組成的沒錯吧! 然後你觀察這裡 2 個按鈕,是不是浮在最上層的。

那你覺得這兩個按鈕是用什麼功能做的呢? 如果你想的是浮動那可就不對了,浮動有什麼特性呢?! 如果忘記了你需要先去複習一下之前我寫的 CSS 教學的浮動文章,如果你用浮動是後面的標準流會上來補位置,這不是我們要的吧! 所以你必須使用這章所學的 CSS 定位,那要使用那一個定位呢? 絕對定位。

如果在絕對定位是什麼的那節你有好好的學習,你會知道絕對定位不佔有位置的,也就是它能夠在盒子模型當中自由移動位置,底下的人做什麼都和它沒有關係,它就是飄在比浮動還更高的高空處這樣你懂了吧! 我們來梳理一下吧!

  • 在父級盒子當中任意擺放子級盒子,子級盒子必須使用絕對定位
  • 絕對定位特點會飄浮起來,飄的比浮動還要高、不影響當前位置
  • 使用絕對定位的子級盒子,可以在父級盒子的任何地方
  • 重點記住子級盒子如果被賦予絕對定位,那它當前上一級一定要有定位模式
  • 上一級有了定位模式,一定是固定卡死位置的相對定位

如果你還是不太懂,我舉個例子,如果你祖先沒有房子沒有土地沒有一個可以深耕的地方,是不是你全家人都漂流定所,從沒有房子沒有土地那邊就是父級盒子,而你是祖先的子孫也就是子級盒子,這樣沒問題吧! 那祖先如果使用絕對定位,絕對定位特點就是飄來飄去這樣可不行,你希望每天沒有固定的住所嗎? 所以祖先要有房要有地就必須使用相對定位,相對定位的特點是可以卡位一個特定區域。

也就是使用相對定位能夠深耕在某一處,定位好後孩子們就可以在這一塊土地或是房子任意的選擇自己的空間以及活動範圍了,由於是在有限空間任意移動位置,那就是使用 CSS 定位中的絕對定位,以上這樣子的舉例你應該會比較有點感覺了。

點我瞭解 小青如何每月多賺5位數台幣

CSS 固定定位 ( fixed ) 是什麼?

CSS教學 CSS固定定位fixed是什麼

這是 CSS 定位中第 5 種定位模式也是相當重要,固定定位 ( fixed ) 是元素盒子模型固定於瀏覽器可視區的位置,主要使用的場景在觀看瀏覽器時滑鼠滾動頁面時,當前元素盒子模型的位置不會進行改變,也就是說會釘在原地。

固定定位 ( fixed ) 語法使用規則

CSS教學 固定定位fixed語法使用規則
元素選擇器 { postion: fixed; }

只要你給你指定的元素,加入CSS 固定定位 ( fixed ) 當前的元素盒子模型就會固定在當前可視窗口,那要注意變成固定定位 ( fixed ) 模式的時候需要注意以下幾點

  • 固定定位 ( fixed ) 以當前瀏覽器的可視窗口為參考點
  • 固定定位 ( fixed ) 不參考父級元素,也跟它沒有任何關係
  • 固定定位 ( fixed ) 在當前瀏覽器滑鼠滾動也是不會被影響固定位置
  • 固定定位 ( fixed ) 並不會佔用原先位置,因為它也是飄在空中
  • 固定定位 ( fixed ) 也是脫離標準流

CSS 黏性定位 ( sticky ) 是什麼?

CSS教學 CSS黏性定位sticky是什麼

其實第 5 種定位比較特殊,但是以前用的少你只需要了解有黏性定位 ( sticky ) 但現在可不同了也變的越來越重要,黏性定位 ( sticky ) 有兩個定位的影子分別是相對定位固定定位混合版本,它的使用場景是當你滾動滑鼠時你會看到一個區塊也會跟著動,當瀏覽器撞到了這一個區塊就會黏住在瀏覽器的上方,你可能在逛有一些網站你會經常看見,小青的網站右側也有使用這種方法。

黏性定位 ( sticky ) 語法使用規則

CSS教學 黏性定位sticky語法使用規則
元素選擇器 { postion: sticky; top:10px; }

只要你給你指定的元素,加入 CSS 黏性定位 ( sticky ) 就固定在當前頁面某一處,當你滾動滑鼠此區塊也會跟著移動,當此區塊移動到撞到瀏覽器頂部時就會黏在頂部,那要注意變成黏性定位 ( sticky ) 模式的時候需要注意以下幾點。

  • 黏性定位 ( sticky ) 會以瀏覽器的可視窗口某處當參考點移動元素 ( 固定定位特點 )
  • 黏性定位 ( sticky ) 是佔有一個固定位置的 ( 相對定位特點 )
  • 黏性定位 ( sticky ) 必須添加 top、left、right、bottom 其中一個才能使用

黏性定位 ( sticky ) 用在一些佈局上倒是不錯,但是缺點是有些瀏覽器是不支援的例如 IE,不過 IE 現在已經淘汰了下去了,以前要做到每個瀏覽器都兼容並不是使用黏性定位 ( sticky ) 來實現的,都是使用 JavaScript 來實現的,但現在已經不一樣了往後是一種趨勢你能不學黏性定位 ( sticky ) 嗎?

點我瞭解 小青如何每月多賺5位數台幣

CSS 定位疊放次序 z-index 是什麼?

CSS教學 CSS定位疊放次序z index是什麼

在我們實際的 CSS 定位佈局中,還會遇到一個重要的問題是定位的疊放次序,在使用 CSS 定位佈局時可能會出現盒子模型重疊的情況產生,因為如果大家都是定位,那誰要先浮在最高呢? 你有想過誰要先浮在最上層給瀏覽者最優先觀看的盒子嗎?

誰壓誰這可就要先給出一個順序,那就要設計一套規範誰是最上面的,誰是最下面的那這個規則就是定位的疊放次序,我們可以藉由 CSS 定位屬性的使用 z-index 來進行盒子的前後次序 ( Z軸 ),有了這一個方法就能夠解決盒子模型的順序了,其中 z 是指 Z 軸的意思唷!

疊放次序 z-index 語法使用規則

CSS教學 疊放次序z index語法使用規則
元素選擇器 { z-index: 1; }
  • z-index 給定的數值可以是正整數負整數或是 0
  • z-index 默認是 auto
  • z-index 數值越大,盒子越靠上
  • 如果 z-index 屬性值都相同,則按照書寫順序,後來者一定會在最上面
  • z-index 的屬性值不能加單位
  • 只有定位的盒子模型才能使用 z-index 屬性

CSS 定位的拓展

CSS教學 CSS定位的拓展

定位的主要應用可以說都已經教完了,接下來的小節都算是在實際開發前端網頁的情況會遇到的一些問題,算是新知識的補充應用。

絕對定位的盒子居中

CSS教學 絕對定位的盒子居中

你知道怎麼讓一個絕對定位的盒子模型水平、垂直居中嗎? 你可以好好想想,你可能會說簡單呀,不就是 margin: 0 auto 就能做到水平居中了,你可以試試看看能不能做到,答案是不能了,因為賦予絕對定位的盒子模型已經不在是一般情況的盒子模型了,你需要使用別種方式,才能做到水平居中。

但問題是今天我們就是不管,就是需要水平居中效果能做到嗎? 是可以的但是需要通過算法的方式進行移動到水平居中的位置

  1. 先讓絕對定位盒子模型向右移動百分之50% ( 就等於寬度的一半 )
  2. 在向左移動自己盒子模型寬度的一半 ( 使用margin-left )

以上是絕對定位的使用場景,那當然固定定位也可以做到因為它也是一個特殊的絕對定位,所以你也可以使用這樣子的算法去進行水平、垂直居中效果唷!

CSS 定位特殊特性

CSS教學 CSS定位特殊特性

絕對定位與固定定位也是不是和浮動有類似之處,這個在你使用它們的時候我想你應該都有發現吧!

  1. 行內元素添加絕對定位或是固定定位,可以直接設置寬度與高度
  2. 塊級元素添加絕對定位或是固定定位,如果不給寬度與高度,會默認內容大小
點我瞭解 小青如何每月多賺5位數台幣

脫標的盒子不會觸發外邊距塌陷

CSS教學 脫標的盒子不會觸發外邊距塌陷

你要知道浮動元素、絕對定位、固定定位元素,以上這一些就都是脫離標準流的,只要你脫離標準流你要記住它們都不會觸發外邊距合併的問題唷!

  • 浮動元素 : 脫離標準流並不會觸發外邊距合併問題
  • 絕對定位 : 脫離標準流並不會觸發外邊距合併問題
  • 固定定位 : 脫離標準流並不會觸發外邊距合併問題

絕對定位 (固定定位) 會完全壓住盒子

CSS教學 絕對定位固定定位會完全壓住盒子

如果有兩個元素,第一個盒子模型有浮動,第二個是 <p> 段落標籤沒有浮動,那會發生什麼事呢? 第二個盒子會跑去第一個盒子下方,對嗎? 答案會和你所想像的不太一樣唷! 結果是 <p> 段落標籤的文字會跑去盒子模型的旁邊! 這樣我們就發現了一些問題。

  • 浮動元素,會壓住它下面的標準流盒子 ( 只有盒子但不包含文字、圖片 )
  • 但是不會壓住下面標準流盒子裡面的文字 ( 圖片 )
  • 其實第一個塊級元素是有壓住 <p> 段落標籤的唷! ( 可以檢查網頁代碼觀察 )

今天如果第一個盒子模型我們把 CSS 浮動屬性給移除,改用絕對定位或是固定定位,這樣會發生什麼事呢? 是不管第二個 <p> 段落標籤裡頭的文字或是圖片,全部都會被壓住唷!

  • 絕對定位或固定定位,會完全壓住它下面的標準流盒子

那你可能會說為什麼浮動裡頭的文字或是圖片不會被壓住呢? 其實就是跟 Word 裡頭的文字環繞效果是相同的,當初浮動就是要做出那樣的效果,使文字做環繞在浮動旁邊,這樣你知道了吧! CSS 浮動一開始開發者並不是要拿來用來做佈局的,是用來做文字環繞的效果

CSS 定位總結

CSS教學 CSS定位總結

這次 CSS 教學我們一口氣學完了現在所有 CSS 定位模式,也說了黏性定位 ( sticky ) 一開始其實並不普及因為在 IE 上會不兼容,但現隨著 2020 年 IE 的淘汰已經沒有這方面的困擾了,前端工程師會比較願意使用 CSS 提供的黏性定位 ( sticky ) 效果來實現目標,讓 JaveScript 去負責該負責的區域就好了,我們來總結一下 CSS 定位吧!

定位模式是否脫標移動位置使用頻率
靜態定位 ( static )不能使用邊偏移
相對定位 ( relative )否 (佔有位置)相對於自身位置移動常用
絕對定位 ( absolute )是 (不佔有位置)帶有定位的父級常用
固定定位 ( fixed )是 (不佔有位置)瀏覽器可視區常用
黏性定位 ( sticky )否 (佔有位置)瀏覽器可視區慢慢變多趨勢
點我瞭解 小青如何每月多賺5位數台幣

能看到這裡通常只有 1% 的人,很感謝您可以閱讀到這裡(鞠躬)
本篇文章歡迎社群分享,可按分享按鈕,讓更多的人知道此篇文章
如果是引用本篇文章任何段落請附上本篇文章連結即可唷!
嚴禁搬運整篇文章到你個人部落格、寫成新聞稿
這麼做你會被任何搜尋引擎懲罰 Ban 掉
如需合作請右上角服務項目 -> 聯繫我們
by 小青

發表迴響