css定位助记

css定位

这几天学习了css中的定位，觉得蛮有意思的就决定写篇文章作为助记

1.定位类型

• 相对定位
• 绝对定位
• 固定定位

2.格式

选择器类型{
属性1;
属性2;

position:relative  //开启相对定位
或position:absolute  //开启相对定位
或position:fixed  //开启相对定位

left:10px;
top:50px;
bottom:50%;
right:100%;
}

3.用法
①相对定位：对于当前自身的位置为目标进行定位
②绝对定位：以最近开启定位的祖先元素为目标进行定位，如果祖先元素没开启定位，就以为浏览器为目标定位
③固定定位：特殊的绝对定位，以浏览器为目标进行定位，不会随着滚动条而进行滚动，常见于网络浮窗
④子绝父相：因为相对定位即使不操作也不会影响，所以父标签可以开启相对定位，协助子标签进行绝对定位