定位的三要素为:
对象(要进行定位移动的对象),
参照物(参照于某一个参照物来进行移动的),
方向(移动的方向与距离(推荐添加两个方向来进行准确的定位))
在进行定位之后需要添加left或者right来进行方向确认,不然就无法进行定位
方向的移动是从浏览器的方向然后往反方向移动
比如说left:50px
就是从浏览器的左边出发,往右移动50像素
注意可以添加负数,比如说left:-50px就是往左边移动50像素
定位的属性:position
属性值:
static(默认),静态定位
relative(相对定位):
相对于自己初始位置来进行定位的,(假设自己的位置原来是在a,使用相对定位之后就是相对于自己的a位置来进行定位的,使用top,right,buttom,right来进行方向移动)
当然我们一般都是不是这样用的,我们更倾向于父相子绝的使用方式
相对定位的使用是不会脱离文档流的,不会破坏正常的网页布局
absolute:( 绝对定位 )
绝对定位的参照物是通过父级元素来进行定位的,不过父级元素有一个要求就是需要有定位属性,这个时候我们会往父级元素添加relative(相对定位)来进行辅助,如果父级元素没有定位属性就往上一级寻找,直到找到浏览器这个最大的父级
绝对定位是脱离文档流的,会打乱当前的文档布局,初始位置不在了,不建议在大型界面上使用
fixer:(固定定位)
固定定位是脱离文档流的,而且是相对于浏览器来进行位置偏移的,总是会固定在浏览器某一个地方,无论浏览器怎么都都不会影响被fixer属性值固定的元素
经常用于:聊天窗口,广告,登录注册的弹窗
sticky:(粘性定位)
粘性定位是相对定位与固定定位的结合,和相对定位一样不脱离文档流,而且和固定定位一样是相对于浏览器一样来进行定位的.该属性的兼容性比较的差
层叠属性:
z-index:a