天天看點

css 定位功能position

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等

【注意】位置移動以父元素為準

絕對定位的元素不留占位

會被後來的元素替代

這意味着什麼?

兄弟元素不再互相推擠了,他們的位置不會發生聯系

父相對,子絕對,子随父移動(記住這話就行了)

絕對/相對配合排版

子随父