CSS position 属性

CSS的position属性用于定位元素，可以让我们更好地控制页面上的元素位置和布局方式。

值

position属性的值有如下几种：

• static（默认值）：元素根据正常流布局，不做特殊处理。
• relative：相对定位，元素在正常流中占据位置，但是位置相对于其原本的位置发生了改变。
• absolut：绝对定位，元素的位置相对于最近的已定位祖先元素（如果找不到已定位的祖先元素，则相对于文档的body元素）。
• fixed：固定定位，元素的位置相对于浏览器窗口是固定的，即使页面滚动也不会改变。
• sticky：粘性定位，元素在容器内滚动时，位置固定不变，直到滚动到容器底部或顶部，或被另一个粘性元素挤出受限区域。

语法

selector {
  position: value;
}

示例

1. 相对定位

相对于本身位置向下移动10个像素

.relative {
  position: relative;
  top: 10px;
}

2. 绝对定位

元素绝对定位，相对于body元素左上角定位

.absolute {
  position: absolute;
  left: 0;
  top: 0;
}

使用绝对定位制作一个居中显示的盒子

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. 固定定位

固定在窗口右下角显示一个图标

.icon {
  position: fixed;
  bottom: 0;
  right: 0;
}

4. 粘性定位

当页面滚动时，将导航栏元素固定在页面顶部

nav {
  position: sticky;
  top: 0;
}

以上就是position属性的详细介绍。在实际开发中，我们可以通过不同的定位方式来实现页面的不同布局效果，带来更好的用户体验。