CSS中使用position属性指定元素的定位类型。到目前为止，共有五种定位方式：
- static
- relative
- absolute
- fixed
- sticky
我们可以使用top、bottom、left、right属性设置元素的具体位置，在使用这四个属性之前，我们需要先设定position属性。
一、static定位
HTML元素的默认定位方式，也可理解为没有定位，其位置遵循文档流顺序（即在排版布局过程中，元素会依照从左至右，从上至下的顺序依次排列）。注意，static定位时，top、bottom、left、right将会不起作用。
二、relative定位
相对定位的元素相对其正常位置定位。注意，相对定位的元素偏移后其原来的位置将会保留。
注意：相对定位偏移后，其原来的位置保留，元素本身将会脱离文档流浮动。
三、absolute定位
绝对定位的元素相对于其已定位（除static之外的四种定位方式定位）的父元素定位，如若没有，则相对元素定位。注意，绝对定位脱离文档流，不占据空间，可与其他元素重叠。
四、fixed定位
固定定位相对浏览器窗口定位，即使浏览器窗口滚动，其位置依旧不变。
五、sticky定位
sticky定位结合了relative定位及fixed定位，主要用在对scroll事件的监听上，当元素距离其父元素的距离达到sticky定位要求时，sticky定位相当于fixed定位，固定在某个位置，未达到定位要求前，其相当于relative定位。
以上是对五种定位方式的简单介绍。下面是一些简单的案例。
（1）sticky定位——固定表格首行及首列
注意：若父元素设置overflow:auto, 则需要设置宽度或高度，sticky才会有效果。
（2）absolute 裁剪图片
clip:rect(top, right, bottom, left)
剪裁矩形的上边缘距离原元素上边缘top像素；
剪裁矩形的右边缘距离原元素左边缘right像素；
剪裁矩形的下边缘距离原元素上边缘bottom像素；
剪裁矩形的左边缘距离原元素左边缘left像素。
