iT邦幫忙

2021 iThome 鐵人賽

DAY 6
1
Modern Web

Modern CSS 超詳細新手攻略系列 第 11

[13th-鐵人賽]Day 11:Modern CSS 超詳細新手攻略 - Position (一)

Position顧名思義就是定位元素的在網頁上的位置,有5種屬性值:static(預設)、relative(相對定位)、absolute(絕對定位)、fixed(固定)以及新加入的sticky

relative 相對定位

相對自身原本位置做移動
https://ithelp.ithome.com.tw/upload/images/20210924/20141395oJ12wIJrkX.jpg
https://ithelp.ithome.com.tw/upload/images/20210924/20141395WbxOSEOsot.jpg
使用left、top、right、bottom進行移位

absolute 絕對定位

以父元素作為基準做移動
https://ithelp.ithome.com.tw/upload/images/20210924/20141395FLveXQGyEw.jpg
https://ithelp.ithome.com.tw/upload/images/20210924/201413959LGenhP4iT.jpg
注意:父元素的定位必須是預設static之外的屬性才可運作

再繼續介紹定位之前,先來介紹一個z-index屬性

z-index

設定元素的層級,層級越高會蓋住其他元素,反之層級越低就會被其他元素蓋住(可以為負數)
https://ithelp.ithome.com.tw/upload/images/20210924/20141395QDi7hCYf8q.jpg

  • z-index只在有設定position屬性的元素上運作

層級順序

在未使用z-index時,層級順序為如下:

  1. html元素
  2. html依序撰寫的元素,越後者層級越高
  3. 已設定定位元素,都是定位元素時,依舊是越後者層級越高

注意事項

  1. z-index只能在有定位的元素下運作
  2. 子元素若為absolute定位,父元素須設定預設以外的定位屬性
  3. 子元素的z-index屬性只在父元素中有用
    https://ithelp.ithome.com.tw/upload/images/20210924/20141395GxSjp3NcuK.jpg
    即使粉色層級高於綠色,但他們非屬同個父元素,因此z-index由各自父元素影響

上一篇
[13th-鐵人賽]Day 10:Modern CSS 超詳細新手攻略 - background
系列文
Modern CSS 超詳細新手攻略11

尚未有邦友留言

立即登入留言