前端面试题：CSS最常见的定位及特点详解

　　- 定位的含义是将元素放在指定的位置上，在css中特指position属性，他一共有5种属性值，分别是：

　　- static静态定位，是元素自带的默认的定位方式。

　　- relative是相对定位，他是基于元素本身的位置进行定位的，不会脱离文档流。

　　- fixed是固定定位是基于浏览器窗口进行定位的，会脱离文档流。

　　- absolute是绝对定位，是基于最近的被设置了非静态定位的上级元素进行定位的，他会脱离文档流，常用的场景是子绝父相。

　　- sticky是粘性定位，是css新增的属性值；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上，简单说在滑动过程中，某个元素距离其父元素的距离达到 sticky 粘性定位 要求时;position:sticky 这时的效果就相对于 fixed 定位，固定到适当的位置。

　　- 使用定位的时候如果需要元素进行位置的调整需要配合偏移属性进行实现对应的效果。偏移属性有四个：top;right;bottom;left;定位的属性决定了定位的偏移参照物

　　- 参照物问题

　　- 静态定位不会发生位置的调整所以不存在参照物的问题

　　- 相对定位添加偏移属性后，相对于自己原来的位置进行位置调整

　　- 绝对定位：如果父元素及外侧没有任何已经定位的元素，则参照浏览器屏幕左上角(body左上角)进行位置的调整;如果父元素或者是就近的父级元素有定位则相对于就进行元素的左上角进行位置的调整;绝对定位的参照物就是所谓的包含块的意思

　　- 固定定位：参照物是浏览器可视窗口位置的左上角进行位置调整，不会受到滚动条的滚动而影响

　　- 粘性定位：粘性定位参照物在实现固定吸顶效果的时候参照物与固定定位一样

　　更多关于“前端培训”的问题，欢迎咨询千锋教育在线名师。千锋教育多年办学，课程大纲紧跟企业需求，更科学更严谨，每年培养泛IT人才近2万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。