目录
一、定义
定位：指的是将指定元素，摆放在页面任意位置，
通过定位，我们可以任意摆放元素
通过position属性设置元素定义
可选值： static 默认值 没有开启定位
relative 开启元素的相对定位
absolute 开启元素绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘滞定位
二、分类
1、relative 开启相对定位
（1）当开启相对定位后，如果不设置偏移量，元素不会发生变化
偏移量：元素开启定位，可以通过left,right,top,bottom四个属性设置
越大越向相反方向移动
left：元素相对于其定位位置的左侧偏移量 left：200px；
right：元素相对于其定位位置的右侧偏移量
top： 元素相对于其定位位置的上侧偏移量
bottom:元素相对于其定位位置的下边偏移量
一般情况下，水平方向一个偏移量，垂直方向一个偏移量，为元素定位。
（2）相对定位是相对于元素在文档流中原来的位置进行定位（top：0；left：0；）
（3）相对定位，不会使元素脱离文档流。
（4）相对定位会使元素等级提升
（5）相对定位不会改变元素的性质，块还是块，行内还是行内
2、absolute 开启元素绝对定位
当position属性值设置为absolute，开启了绝对定位。
特点：
（1）会使元素脱离文档流
（2）如果不设置偏移量，则元素位置不会发生改变（若设置则改变）
（3）绝对定位是相对于离它最近的包含块定位 发生定位的。
（一般情况下，开启了子元素的绝对定位，都会开启父元素的相对定位 “父相子绝”）
包含块： 正常情况下，离当前元素最近的祖先元素
定位情况下，离它最近的开启了定位的祖先元素（包含父元素）
如果所有的祖先元素，都没有开启定位，则会相对于浏览器窗口进行定位
也就是html
（4）绝对定位也会使我们元素提升一个等级
（5）绝对定位会改变元素的性质，内联元素变块元素，块元素的宽高默认会被内容撑开
3、fixed 开启元素固定定位
当元素的position属性设置为fixed，则开启了固定定位。
特点：（类似绝对定位）
（1）会使元素脱离文档流
（2）会固定在浏览器视口的某个位置，不会随滚动条滚动
（3）固定定位会相对于浏览器的视口进行定位
（4）应用场景：固定导航、固定侧边栏、广告
4、sticky 开启元素粘滞定位
当元素的position属性设置为sticky，则开启了粘滞定位。
（1）需要配合top或bottom使用
（2）它是以浏览器为参照物 会占有原来的位置，类似相对定位
（3）设置top值后，没有达到top值，则会正常显示，达到了就会类似固定定位
（4）粘滞定位，兼容性没有其他定位好
三、绝对定位元素布局
1、水平方向
left margin-left boder-left padding-left width paddinng-right boder-right margin-right right
当开启定位后，水平方向的布局等式就会加上left、right两个值，此时规则一样，九个值相加，必须等于其父元素的宽度
等式不满足，浏览器自动调整
当发生过度约束时，
（1）如果9个值中没有auto，则自动调整right的值使等式满足；如果有则调整auto
（2）9个值，可设auto，是margin width left right
（3）left和right值默认为auto，如果不设置，等式不满足时会自动调整这两个值
总结：浏览器进行调整时，right>left>margin
2、垂直方向
是由垂直方向9个值共同决定，top...bottom
2282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
