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等
【注意】位置移动以父元素为准
绝对定位的元素不留占位
会被后来的元素替代
这意味着什么?
兄弟元素不再互相推挤了,他们的位置不会发生联系
父相对,子绝对,子随父移动(记住这话就行了)
绝对/相对配合排版
子随父
固定定位Fixed
与绝对定位非常接近
唯一的不同是固定定位相对的是body
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动: