1. 程式人生 > >css 定位功能position

css 定位功能position

fix right 默認 pos ati 滾動 位置 body size

Static 定位

HTML元素的默認值,即沒有定位,元素出現在正常的流中。
靜態定位的元素不會受到top, bottom, left, right影響。

相對定位Relative
相對定位元素的定位是相對其正常位置。
相對定位三要素:
占位:保留
參考坐標軸原點:以自身為準,橫向/縱向偏移
z值:非0整數 如:-1, -2 ,-3 , 1 ,2 ,3等
【註意】位置移動以自己原先的位置為準

絕對定位Absolute
絕對定位的元素的位置相對於最近的已定位父元素,如果元素沒有已定位的父元素,那麽它的位置相對於<html>:
絕對定位三要素:
不占位
坐標原點參考父對象
z值:非0整數 如:-1, -2 ,-3 , 1 ,2 ,3等


【註意】位置移動以父元素為準
絕對定位的元素不留占位
會被後來的元素替代
這意味著什麽?
兄弟元素不再互相推擠了,他們的位置不會發生聯系

父相對,子絕對,子隨父移動(記住這話就行了)
絕對/相對配合排版
子隨父

固定定位Fixed
與絕對定位非常接近
唯一的不同是固定定位相對的是body
元素的位置相對於瀏覽器窗口是固定位置。
即使窗口是滾動的它也不會移動:

css 定位功能position