定位模式:
position
relative;相对定位
absolute绝对定位
fixed 固定定位
static 静态定位(没有定位)
边偏移:
left
right
top
bottom
通常水平方向控制left或right
垂直方向控制top或bottom
元素的【外边距】相对于包含块的距离
px
百分比
绝对定位:
* 相对于最近的【定位父级】进行定位
定位父级——有定位属性(relative,absolute,fixed)的父级
如果没有定位父级相对于根元素html定位
基础特性:
不定义偏移量时相当于原地漂起来
1)提升层级(高于浮动元素)
2)脱离文档流(原来位置不再占位)
应用:
1.作为绝对定位的定位父级
2.微调对齐
3.提升层级(相互覆盖的元素)
相对定位:
相对于元素原来位置进行定位(偏移)
基础特性
如果不定义偏移量【基本】对元素没有影响
1)提升层级(高于浮动元素)
2)不脱离文档流(原来位置仍然占位)
应用:
1.作为绝对定位的定位父级
2.微调对齐
3.提升层级(相互覆盖的元素)
固定定位:
始终相对于窗口定位
基础特性
不定义偏移量时相当于原地漂起来
1)提升层级(高于浮动元素)
2)脱离文档流(原来位置不再占位)
应用:
相对于窗口定位的元素
如:弹窗,跟随滚动的侧边栏(客服、返回顶部)
小总结:
绝对定位、固定定位:
1.脱离文档流
2.提升层级
3.可以使行内元素生成一个块级框(支持宽、高、padding,margin, border,text-align,tex-indent)
4.可以使未定宽度的块适应内容
5.包含浮动子元素不会出现高度塌陷
6.不出现margin值塌陷问题
7.浮动脱离文档流不脱离文本流所以会出现文本绕排既脱离了文档流又脱离了文本流,所以相当于完全不占位
相对定位:
1.不脱离文档流
2.提升层级
3.不定义偏移量时基本对元素没有影响 a.不改变元素本身的显示特性