iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
0

前言

一開始學習的網頁都是比較單純都是一行一行的排版,筆者前面的文章也都先以排版的樣式開始介紹,然而時間久了自然會想讓網頁變得更加複雜,例如會想做點堆疊或者是幫圖片加上浮水印之類的效果,為了讓網頁可以排出更複雜的版面,今天的文章就是要來介紹 position 以及 z-index 這兩個 CSS 樣式。

position介紹

position 翻成中文就是位置的意思,既然跟位置有關可以推想一下一定會有一個參考點跟自己的定位點,不然這個位置是無法確定的,所以可以猜想出來一定會有兩個元素分別去寫自己的 position 來定位。

  • 預設定位(static)

    預設值,沒有任何的定位效果,元素都會逐行排列。

    Imgur

  • 相對定位(relative)

    基本上跟 static 非常像,差別在於寫 position: relative; 時,假如加了 topbottomleftright 等等幫助定位的屬性,在 position: relative; 時會相對性的調整該元素的位置。

    Imgur

  • 絕對定位(absolute)

    絕對定位跟底下的固定定位非常像,差別在於假如 父元素 有寫上 position 的相關屬性,則 子元素 會依照 父元素 的位置去進行後續的定位動作,若 父元素 沒有寫上任何的 position ,則會逐漸往上尋找其他 祖先元素 看看 祖先元素 是否有寫 position 屬性,如果都沒有則會依照 HTML body 來進行絕對定位,所以會寫 position: absolute; 的通常都是在 子元素 的地方撰寫,而 父元素 會寫上 position: relative; 幫助 子元素 進行絕對定位。

    Imgur

  • 固定定位(fixed)

    固定定位相對於絕對定位就單純很多,只會針對頁面去進行定位,其 父元素 永遠都是 HTML body ,不用刻意的去思考上層元素的相對定位。

z-index

在前言中提到了堆疊這個效果, z-index 就是負責處理元素堆疊的樣式,一般來說網頁元素都是屬於二維空間的排列,也就是單純利用 x 軸以及 y 軸來考慮元素的位置,既然要做到堆疊元素勢必得考慮上下之間的關係,這時候就牽扯到 z 軸了,而 z-index 就是負責處理 z 軸的重要樣式。

這邊帶點空間概念來思考,以我們眼睛面對螢幕來看, x 軸為左右、 y 軸為上下、而 z 軸就是面對我們眼睛的方向了,用這種方式來思考 z-index 應該會相對好懂一些。

z-index 後方所接的值以數字為主,數字越大代表在越上層反之則是在越下層,這時候你可能會問:我前面也可以利用絕對定位的方式來達到堆疊的效果,為什麼還要特地學一個 z-index 呢?

其實道理很簡單,前面的絕對定位的確可以達到堆疊的效果,但僅限於 父元素子元素 之間,假如我今天有多個 子元素 要進行堆疊,而且這些 子元素 同時面對一個 父元素 ,這種時候用絕對定位就比較不好做,就必須要利用 z-index 了。

溫馨小提醒:要使用 z-index 記得要搭配 position ,這也是為什麼筆者會先提 position 再提 z-index 的原因喔!

總結

今天的總結練習主要就是探討 position 以及 z-index 之間的關係, position 在複雜的網頁中扮演非常重要的角色,同時這也算是 CSS 中非常容易搞混的樣式,把 position 以及 z-index 搞懂任何再複雜的網頁都可以順利的排版出來了。


上一篇
Day08-更強大的網頁排版利器!Grid
下一篇
Day10-html tag元素預設排版樣式
系列文
從0開始的網頁生活!30天從網頁新手到網頁入門30

尚未有邦友留言

立即登入留言