CSS position 属性

CSS position 属性定义元素的定位方式和定位规则。元素通过 position 属性，可以相对于文档、父元素、兄弟元素等进行定位。

position 属性值

CSS 中的 position 属性有以下几个值：

1. static：默认值，元素会按照文档流进行排列，不会被定位。
2. relative：元素相对于自己默认的位置进行偏移。通过 top、right、bottom、left 等属性来指定元素的偏移位置。
3. absolute：元素相对于最近的已定位元素进行定位。如果没有已定位的元素，则相对于 body 元素进行定位。
4. fixed：元素相对于浏览器窗口进行固定定位，即不随页面滚动而移动。
5. sticky：元素相对于其容器进行定位，但在容器内滚动时会保持固定位置。当滚动到指定的位置时，会变成固定定位。

position 属性的使用技巧

1. 定位一般需要配合 top、right、bottom、left 等属性一起使用，这样才能定义出元素的具体位置。
2. 父元素需要使用 position: relative 来确定子元素参考的基准点。
3. absolute 和 fixed 定位需要预留足够空间，否则会出现遮挡和覆盖的问题。
4. sticky 定位需要指定 top、bottom 或 left、right 中的一个或多个值，否则会失效。
5. 浮动元素的 position 值为 relative。
6. 固定定位的元素在移动端需要小心使用，因为固定定位可能会导致用户无法正常操作浏览器。

实例演示

<div class="block"></div>
<div class="box"></div>

.block {
  width: 100px;
  height: 100px;
  background-color: #f00;
}

.box {
  position: relative;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  background-color: #00f;
}

以上代码演示了一个相对定位的例子。box 元素相对于自己原本的位置，向下偏移了 20px，向右偏移了 20px。

<div class="wrapper">
  <div class="block"></div>
  <div class="box"></div>
</div>

.wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #ccc;
}

.block {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  background-color: #f00;
}

.box {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #00f;
}

以上代码演示了一个绝对定位的例子。block、box 元素相对于容器 wrapper 进行定位。

<div class="wrapper">
  <div class="block"></div>
  <div class="box"></div>
</div>

.wrapper {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #ccc;
}

.block {
  width: 100px;
  height: 100px;
  background-color: #f00;
  float: left;
}

.box {
  position: relative;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  background-color: #00f;
}

以上代码演示了一个相对定位和浮动结合的例子。block 元素浮动到左侧，box 元素相对于自己原本的位置，向下偏移了 20px，向右偏移了 20px。

总结

position 属性是 CSS 中非常重要的定位属性，能够使网页布局更加灵活多样化。在使用时需要注意定位参照的基准点、预留空间、兼容性等问题，同时结合其他属性和技巧可以达到更好的效果。