Position定位个人认为position属性真是CSS的会面。尤其是Absolute，当年受尽凌辱。当然，如果你现在爱上了这个属性，谁用过就知道了。position属性position是CSS的一个属性，地位比较高，也是我们要重点关注的一个属性。对应四个相关的position属性，top,right,bottom,left分别指的是到top,right,bottom,left的距离。请注意，它在设置后会自行移动，不会排挤其他元素。在下文中，位置属性被称为上、右、下和左。如果一个页面没有通过调整位置，在今天看来是极其不堪的。主要包括以下属性值。如果不包括继承，一共有5个。下面一一列举例子：static直译为static，默认值，在其上使用position的position属性是无效的。relative的直译是相对的，类似于static，但是在其上使用position的position属性是有效的。注意relative不会脱离单据流，具体见下图。absolute直译为绝对，向上查找第一个非静态定位标签，然后position属性相对于它生效。如果未找到，则相对于文档。往上看：label中有父子关系，从子到parent甚至是祖先到body。向下则相反。absolute会跳出文档流。fixed直译为校正，简单粗暴，直接相对于浏览器窗口的显示区域定位。fixed将打破文档流。Sticky直译为粘性。当对应的内容显示在可视范围内时，会显示为相对定位。当内容即将脱离显示区域时，会切换到固定定位。sticky不会脱离文档流，即使它被替换为fixed。下面是对五种定位的图解说明。静态设置位置属性无效。static是为了方便理解或者相对比较看效果。该图是为了证明相对于documentabsolute最大的难点在于具体的相对定位：absolute默认是相对于第一个不是static的元素。标签，你也可以自己试试，父标签是默认的。fixed相对于浏览器窗口显示内容的定位如果在fixed元素的父元素上设置transform，会导致fixed失败。这是一个印象。当sticky在显示区域时，使用relative。当你想逃离显示区域时，切换到新的固定区域。只是要注意兼容性。非常适合标题模块。以上是职位速成知识。如果您有任何问题或其他问题，可以留言询问。如果文章对您有帮助，我将非常高兴。如果喜欢我的文章，请关注我。定期发布技术文章，干货满满。源码相关CodePen
