iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
1
自我挑戰組

迷路的前端工程系列 第 13

第十三日:定位

  • 分享至 

  • xImage
  •  

第十二日回顧:
我們在昨天介紹了 CSS的元素如何套用顏色和塊狀元素更改長寬的方式,在能夠更改大小,更改顏色後就要來進入更重要的章節了,定位

定位,position,排版章節的一份子,具體上是用來改變網頁元件的呈現方式,默認是從左上到右下依照元素型態去排的,而接下來我們會做些改變

先介紹常見的幾種定位吧
1.正向流向: posotion : static,默認的方式,會從左上往右下排列
2.相對定位: position : relative,根據父元素來確認自身位置,可以透過 top/left/right/bottom等偏移屬性來設定要往上下左右移動多少距離
3.絕對定位: position : absolute,在元素設置成絕對定位後他自身位置會脫離網頁流,若無設定偏移屬性的情況下會出現在左上角與其他元素重疊
4.固定定位: position: fixed,在設置好此元素的位置後那怕網頁進行捲動一樣不會改變位置

介紹完定未來再來介紹輔助它的一個屬性 z-index 重疊
我們可以在一個元素上設置重疊屬性來決定當元素重疊時誰在上誰在下,具體使用方法為給定一個數值,數值越高者會出現在圖層越上方

.p1 {position:absolute; z-index : 5; }}
.p2 {position:absolute; z-index : 10; }

上面我們有 p1 和 p2 兩個元素,設置絕對定位後都會出現在左上角的位置,不過由於 p2 的重疊數值較高因此 p2 會蓋過 p1 。

今天內容就到此結束啦,明天會介紹更多排版上的內容,讓我們明天見~

小抱怨專區:
一個中秋節沒烤到肉卻拿到了一堆的月餅,我不喜歡這個熱量來源啊


上一篇
第十二日:顏色
下一篇
第十四日:置中
系列文
迷路的前端工程16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言