iT邦幫忙

2022 iThome 鐵人賽

DAY 16
0
自我挑戰組

那些八年級生的經典迷你遊戲,前端JS自學之路系列 第 18

CSS 學習 - Overlapping and floating element

  • 分享至 

  • xImage
  •  

Overlapping elements

z-index

定位結構講述的relative, absoulte,或是absoulte裡的fixed 定位,都可以重疊;若沒有特別指定,當兩element重疊時,在html程式中較晚出現的會疊在上面。
如果想自己控制在上面的element,則使用z-index,出現多個z-index,則以越大的值優先疊在上面。
指定方式 eg.

h1 {
 position: fixed;
 padding: 10px;
 width: 100%
 z-index: 10;
}

Floating element

normal flow使用,會盡可能的在 containing element 的左或右方,在使用floating應該要設定 width,如果沒有的話,畫面會接近containing element的寬度來呈現 (看起來跟沒特別指定的normal float一樣)


上一篇
CSS學習 - Positioning scheme (定位結構)
下一篇
CSS 學習 - 使用float擺放的注意事項
系列文
那些八年級生的經典迷你遊戲,前端JS自學之路20
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言