iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0

1. 邊偏移

邊偏移就是定位的盒子移動到最終位置,有top bottom left right 四種

2. 相對定位 絕對定位 使用場景

相對定位 position : relative (重要)

絕對定位 absolute (重要)

子級使用絕對定位 父級則需要相對定位

  1. 子級絕對定位 部會佔有位置 可以放到父盒子裡面的任何一個地方

    部會影響其他的兄弟盒子

  2. 父級絕對要新增定位限制子盒子在父盒子內顯示

  3. 父盒子布局時,需要佔有位置,因此父親只能是相對定位

這又是子絕父相的由來,所以相對定位經常用來作為絕對定位的父級

總結 : 因為父級需要佔有位置,因此是相對定位,子盒子部需要佔有位置 所以是絕對定位


在使用定位布局時,可能會出現盒子重疊的情況。

此時 可以使用 z-index來控制盒子的前後次序 ( z軸 )

語法 :

css
選擇器 { z-index:1;}
  • 數值可以是正整數 負整數或0 默認是auto 數值越大 盒子越靠上
  • 如果屬性值相同 則按照書寫順序 後來居上
  • 後面的數字不能加單位
  • 只有定位的盒子才有 z-index 屬性

上一篇
Day 15 CSS <網頁布局-定位布局-1.定位模式>
下一篇
Day 17 CSS <用戶介面樣式 & 三角>
系列文
從零開始前端學習(HTML、CSS、JavaScript) 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言