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等
【注意】位置移動以父元素為準
絕對定位的元素不留占位
會被後來的元素替代
這意味着什麼?
兄弟元素不再互相推擠了,他們的位置不會發生聯系
父相對,子絕對,子随父移動(記住這話就行了)
絕對/相對配合排版
子随父