前端面试题：几种不同的定位分别有什么特点？详细阐述

• 定位的含义是将元素放在指定的位置上，在css中特指position属性，他一共有5种属性值。
• 分别是
  • static静态定位，是元素自带的默认的定位方式。
  • relative是相对定位，他是基于元素本身的位置进行定位的，不会脱离文档流。
  • fixed是固定定位是基于浏览器窗口进行定位的，会脱离文档流。
  • absolute是绝对定位，是基于最近的被设置了非静态定位的上级元素进行定位的，他会脱离文档流，常用的场景是子绝父相。
  • sticky是粘性定位，是css新增的属性值；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上，简单说在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位 要求时；position:sticky 这时的效果就相对于 fixed 定位，固定到适当的位置。
• 使用定位的时候如果需要元素进行位置的调整需要配合偏移属性进行实现对应的效果。偏移属性有四个：top；right；bottom；left；定位的属性决定了定位的偏移参照物
• 参照物问题
  • 静态定位不会发生位置的调整所以不存在参照物的问题
  • 相对定位添加偏移属性后，相对于自己原来的位置进行位置调整
  • 绝对定位：如果父元素及外侧没有任何已经定位的元素，则参照浏览器屏幕左上角（body左上角）进行位置的调整；如果父元素或者是就近的父级元素有定位则相对于就进行元素的左上角进行位置的调整；绝对定位的参照物就是所谓的包含块的意思
  • 固定定位：参照物是浏览器可视窗口位置的左上角进行位置调整，不会受到滚动条的滚动而影响
  • 粘性定位：粘性定位参照物在实现固定吸顶效果的时候参照物与固定定位一样

*陆荣涛前端学习交流Q群858752519
加群备注：CSDN推荐