iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 11
1
自我挑戰組

前端之 " wow~原來是這樣啊 "系列 第 11

Day 11 CSS position之想去哪就去哪

瞭解 position 設定,讓網頁元素想去哪裡就去哪裡

在網頁排版設計中,並不是所有元素都會依照水平及垂直的一定流向排列,有時其中一個元素需偏向某一個方向,或是它並不總是處在固定的位置上,那麼這時了解 position 的設定就非常重要了!

我們來看看它有那些屬性值供設定:

  • static :預設值,原本的位置,也就是依照元素原本特性,應該待的位置
  • relative :移動控制是相對於元素本來的位置,並且佔據原本的位置
  • fixed :移動控制是相對於視區
  • absolute :移動控制是相對最近的相對點(除了 position 爲 static 以外的對象),不佔據原本的位置
  • sticky :介於 relative 與 fixed 之間,實現滾輪跟隨效果。

接著我們一個一個看他們的效果,並詳細說明。

static

我有三個 div 盒子,一般狀況下,預設爲 static,爲垂直排列:

https://ithelp.ithome.com.tw/upload/images/20181026/20111959o9MakwgUka.png

relative

把其中一個盒子 positon 改成 relative。

https://ithelp.ithome.com.tw/upload/images/20181026/20111959NdqGkl02M9.png

看起來沒有任何變化,是因爲我們還沒有爲它加上位移值,可以分 top / right / bottom / left 進行設定,我們試試 top: 30px; left: 30px;

https://ithelp.ithome.com.tw/upload/images/20181026/20111959U7FeldxC6Y.png

可以發現它距離原本位置 ,向下位移了 30px ,向左位移了 30px ,且仍保留原本的位置(其他盒子並沒有受到影響)。

fixed

接著我們把剛剛的藍色盒子改成 position: fixed;,並設置它的位移位置爲 top: 30px; left: 30px; ,效果如下:

https://ithelp.ithome.com.tw/upload/images/20181026/20111959Y0yZGl09Pc.png

它的位置控制是相對於視區,且可以觀察到第三個盒子往上排列了,表示 fixed 的原位置並沒有被保留。另外,因爲它的位置控制是相對於視區,所以當向下滾動頁面時,它仍然會保持在視線上一樣的位置,就像被固定住了一樣。

fixed

absolute

接著我們把藍色盒子再變成 absolute 並設置它的位移位置爲 top: 30px; left: 30px; 試試看。

https://ithelp.ithome.com.tw/upload/images/20181026/20111959aMGRrSmDso.png

怎麽跟 fixed 長一樣?那是因爲 absolute 的移動控制是相對最近的相對點,相對點是除了 position 爲 static 以外的對象,所以在畫面中,並沒有其他相對點,那麼它就會一路向上找到 body。在頁面尚未往下移動前,目前的視區也就是 body 的起始,所以看起來與 fixed 長一樣,當滾動時就可以發現他們兩個是不一樣的囉!

如果我們不想要找 body 當相對點,那麼我們就給它一個父層盒子當它的相對點。如下圖,父層盒子爲黑色框線的盒子,設置父層的 position 爲 relative ,使它成爲藍色盒子的相對點。

https://ithelp.ithome.com.tw/upload/images/20181026/20111959fzuSu55zAl.png

sticky

sticky 創造了很棒的滾輪跟隨效果,它的特性介於 relative 與 fixed 之間,我們先看一下畫面,再講解設定。

sticky

上述範例將 position 設定爲 sticky ,且位置設定 top: 30px;,當盒子距離頂端大於 30px,盒子的 position 性質爲 relative,當盒子距離頂端小於 30px 時,盒子的 position 性質爲 fixed,則相對點變爲視區,使之可以固定於距離視區 top 30px 處。

若你想讓 sticky 有終止點,那麼它就給它一個父層盒子(如下圖黑色框線),當父層盒子離開視區時,sticky 也會一起離開。

sticky2

以上爲基礎的 position 說明,試試看吧/images/emoticon/emoticon30.gif


上一篇
Day10 讓圖片好好裝在盒子裡
下一篇
Day12 講講 CSS3 動畫 - Transitions
系列文
前端之 " wow~原來是這樣啊 "30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言