iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
0
Modern Web

淺談web系列 第 20

鐵人賽DAY20-CSS(四)

  • 分享至 

  • xImage
  •  

一、位置
1.static:是預設值,使用之後則該元素不會被特別定位,而是照著瀏覽器的配置自動排版在網頁上。

2.relative:配合著top,right,bottom和left屬性使用,則該元素會根據設定做出相對的排版。

3.fixed:配合著top,right,bottom和left屬性使用,則該元素會根據設定做出固定的排版,不管頁面如何變動都不影響該元素的位置。

4.absolute:配合著top,right,bottom和left屬性使用,則該元素會根據設定並且參照其父元素做出排版。

5. sticky:功能介於relative與fixed中,當在設定值內時則與relative功能相同,當超出設定值時則與fixed功能相同,會將該元素固定在設定值。

最後一篇會特別介紹position是因為在我首次運用CSS寫網頁時被這東西困擾了很久,希望在我的詳細介紹下,能讓初次接觸者免除我當初的大困擾啊!!!另外,CSS還有很多其他的功能,有興趣的讀者可以至w3schools的官網上自行學習唷~

參考資料:
1.https://www.w3schools.com/css/css_positioning.asp


上一篇
鐵人賽DAY19-CSS(三)
下一篇
鐵人賽DAY21-JavaScript(一)
系列文
淺談web30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言