天天看点

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等

【注意】位置移动以父元素为准

绝对定位的元素不留占位

会被后来的元素替代

这意味着什么?

兄弟元素不再互相推挤了,他们的位置不会发生联系

父相对,子绝对,子随父移动(记住这话就行了)

绝对/相对配合排版

子随父