关于前端学习:CSS样式元素定位

绝对定位

position:relative

1. 在没有设置偏移量时，对元素自身没有影响
2. 设置绝对定位后，元素不会脱离文档流，并且不会影响其余元素布局，但仍旧占位

相对定位

position:absolute

1. 设置相对定位后，元素会脱离文档流
2. 设置相对定位后，行内元素反对块元素个性，块元素反对行内元素个性
3. 设置相对定位后，元素参照最近设置绝对定位的父级元素进行偏移定位，如果所有父级元素没有进行设置绝对定位，则依照整个文档窗口进行定位

固定定位

position:fixed

1. 始终以浏览器可视窗口进行定位，不会受到窗口滚动和父级元素定位的影响
2. 设置固定定位后，元素脱离文档流
3. 设置固定定位后，行内元素反对块元素个性，块元素反对行内元素个性

黏性定位

position:sticky

1. 没有达到指定偏移地位无定位成果，当达到指定偏移地位后元素固定在那个地位不动

设置定位元素偏移量

 向左偏移语法：`left:10px`
向右偏移语法：`right:10px`
向上偏移语法：`top:10px`
向下偏移语法：`bottom:10px`

设置定位元素显示层级关系

z-index: 数值

1. 设置定位元素的层叠程序，值越大，层级就越高，显示在下层
2. 父元素的层级会影响子元素的层级关系
3. 值为 auto 时，不参加层级关系比拟