定位 position:
1:定位类型:
静态定位 static 标准流下的默认值 一动不动
相对定位 relative
绝对定位 absolute
固定定位 fixed
2:定位方位值:
left:当前定位元素距离父元素左侧边界的值
top:当前定位元素距离父元素上侧边界的值
bottom:当前定位元素距离父元素下侧边界的值
right: 当前定位元素距离父元素右侧边界的值
相对定位
绝对定位
绝对定位的元素如果父级元素没有定位属性它是以body左上角作为参考定位
如果父元素有定位属性(相对,绝对,固定)就会以父级元素左上角作为参考定位,所以如果你想要父亲管控孩子,你就必须给父元素身上添加相对定位属性
父级: 绝对定位元素会以离自己最近的拥有定位属性的父级元素左上角作为参考
子绝父相
定位类型 | 是否脱标 | 参考位置值 | 用处 | 坐标位置值 |
---|---|---|---|---|
static | 否(默认值) | 无 | 无 | 无 |
relative | 否(保留原来位置) | 自身左上角 | 微调元素(外边距),子绝父相 | left,right,bottom,top |
absolute | 是 | 以距离自己最近的拥有定位属性的父级元素左上角定位,直到找到body | anywhere | left,right,bottom,top |
fixed | 是 | body左上角 | 滚动条动它不动 | left,right,bottom,top |
大小并排就用浮动,间距就用外间距 ,如有小盒子在大盒子里的放置可用绝对定位