iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

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

CSS Position

前言

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) }}
直播中

尚未有邦友留言

立即登入留言