1. 概述
在网页开发中，有时需要将某个元素尽可能准确地放置在一个固定的位置。这种需求可以通过css的定位来实现。
2. 定位类型
2.1 position属性
position属性用于指定元素的定位类型。常用的值有：
static：元素正常显示，位置由文档流决定。
relative：元素相对于其原有位置进行定位。
absolute：元素相对于最近的已定位祖先元素进行定位，如果不存在则相对于body元素。
fixed：元素相对于浏览器窗口进行定位，即使页面滚动，元素也不会移动。
默认值为static。
2.2 z-index属性
z-index属性用于控制元素在垂直方向上的堆叠顺序。其值为一个整数，数值越大的元素越在上层显示。
3. 定位示例
3.1 相对定位
相对定位是将元素相对于其原有位置进行微调。使用position:relative；
.relative{
position:relative;
left:20px;
top:20px;
z-index:2;
}
上面的代码将元素相对于其原有位置左移20像素、上移20像素，z-index为2，这样就可以将元素放在最上层。
3.2 绝对定位
绝对定位是将元素相对于其祖先元素进行定位，该祖先元素必须设置了position属性值。如果不存在这样的祖先元素，则相对于body元素进行定位。使用position:absolute；
.relative{
position:relative;
}
.absolute{
position:absolute;
left:20px;
top:20px;
z-index:2;
}
上面的代码将元素相对于其最近已定位祖先元素定位，左移20像素、上移20像素，z-index为2。
3.3 固定定位
固定定位是将元素相对于浏览器窗口定位，即使页面滚动，元素也不会移动。使用position:fixed；
.fixed{
position:fixed;
left:20px;
top:20px;
z-index:2;
}
上面的代码将元素相对于浏览器窗口左移20像素、上移20像素，z-index为2。
4. 总结
本文介绍了css的定位属性，包括position和z-index属性，以及相对定位、绝对定位和固定定位的用法。通过理解这些属性和用法，可以使开发者更灵活地控制元素的位置和层叠。