iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

30天搞定CSS及切版系列 第 7

CSS Position

  • 分享至 

  • xImage
  •  

前言

position 是用來設置元素定位的屬性
Position分成了static 、fixed、relative、absolute、stickily

static

元素預設的定位模式
也就是不做任何調整。

fixed

設定此定位的元素將會永遠置於螢幕的某個位置,不會隨著scroolBar移動。
同時可以設定top、right、left、bottom來決定要設定在哪裡。

relative

在正常的文檔排版中可設置top、right、left、bottom,從原始位置位移多少距離。

absolute

會往父層尋找有設定position但非static的元素
以父層為基準top、right、left、bottom來決定要設定在哪裡。

sticky

在可scroll的元素裡會有效果,
需設定top、left等...
當設定sticky的元素碰到可scroll元素的top、left位置後會變成fixed固定的位置。


上一篇
CSS選擇器
下一篇
CSS overflow
系列文
30天搞定CSS及切版16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言