CSS 有四种常用的定位方法：静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed），其中相对、绝对和固定定位的元素均可以使用“top”、“left”、“right” 和“bottom” 属性来控制其位置。 静态定位是默认的定位方式，不需要任何属性进行设置，所有元素都是静态定位，而静态定位的元素位置不会受到“top”、“left”、“right” 和“bottom” 属性的影响。 相对定位会使元素相对其原本位置进行定位。相对定位时，元素不会脱离文档流，因此仍会占用原来的空间，同时可以通过“top”、“left”、“right” 和“bottom” 属性进行位置调整，值为正数向下或向右移动，负数则向上或向左移动。

div {
  position: relative;  /*相对定位*/
  top: 20px;  /*向下移动20像素*/
  left: 20px;  /*向右移动20像素*/
}

绝对定位与相对定位类似，但元素会脱离文档流，不再占用原来的空间，因此可能会导致布局上的问题。绝对定位是相对于最近的定位祖先元素进行定位，如果没有定位祖先元素，则使用文档的 body 元素。使用“top”、“left”、“right” 和“bottom” 属性进行位置调整。

div {
  position: absolute;  /*绝对定位*/
  top: 50px;  /*距离定位祖先元素顶部50像素*/
  left: 50px;  /*距离定位祖先元素左边50像素*/
}

固定定位是相对于 viewport 进行定位，不随页面滚动而变化。同样，也可以使用“top”、“left”、“right” 和“bottom” 属性进行位置调整。

div {
  position: fixed;  /*固定定位*/
  top: 0;  /*距离 viewport 顶部0像素*/
  left: 0;  /*距离 viewport 左边0像素*/
}

除此之外，CSS 还提供了“sticky” 定位，可以将元素粘在 viewport 上或者相对定位元素上的某个位置上。但由于该定位在不同浏览器中有较大差异，可以使用 JavaScript 来实现兼容性的“sticky” 效果。