定位-第十四天

定位

• 常见应用场景

  • 解决盒子与盒子之间的层叠问题
  • 定位之后的元素层级最高,可以层叠在其他盒子上面

• 可以让盒子始终固定在屏幕中的某个位置,不随滚动条滚动

• 设置定位的方式

  • 定位方式	属性值
    静态定位	static
    相对定位	relative
    绝对定位	absolute
    固定定位	fixed

• 定位的默认值:静态定位,相当于没有写,没有边偏移

相对定位

• 自恋型定位,相对自己之前的位置进行移动
• position:relative
• 特点
  • 需要配合方位实现移动
  • 相对自己原来的位置进行移动
  • 在网页中占位置→没有脱标
• 应用场景
  • 配合绝对定位(子绝父相)
  • 用于小范围的移动
• 变便宜

偏移值

• top跟left优先级比right跟bottom的优先级更高

绝对定位

• 拼爹型定位,相对于非静态的父元素进行定位移动
• position:absolute
• 特点
  • 需要配合方位属性实现移动
  • 默认相对于浏览器可视区域进行移动
  • 在页面中不占位置→已经脱标
• 应用场景
  • 配合绝对定位(子绝父相)