站长百科 | 数字化技能提升教程 数字化时代生存宝典 
一、Positioning (定位)
CSS的position属性允许以不同的方式定位元素，包括使元素相互重叠，以及实现以往可能需要使用多个表格才能完成的布局任务。CSS的position属性允许为元素设置定位，并控制元素在另一个元素之后的层叠关系。此外，当一个元素的内容过大时，还可以通过其他CSS属性来控制元素的溢出行为。
元素的顶部、底部、左侧和右侧属性（即top、bottom、left和right）只有在设定了position属性后才能生效。然而不同的定位方法有不同的工作方式。目前有五种不同的定位方法。
1、Static定位
HTML元素的默认值是静态定位（Static），默认情况下元素出现在正常的文档流中。简单来说，静态定位的元素不会受到 top, bottom, left, right 影响。
2、Fixed 定位
固定定位（Fixed positioning）是一种常用的 CSS 定位方式，它使元素的位置相对于浏览器窗口保持固定。无论页面如何滚动，固定定位的元素都会保持在指定的位置上，不会发生移动。
实例：
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
注意：
- Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持；
- Fixed 定位使元素的位置与文档流无关，因此不占据空间；
- Fixed 定位的元素和其他元素重叠。
3、Relative 定位
相对定位（Relative positioning）是一种常见的 CSS 定位方式，它使元素相对于其正常位置进行偏移。
实例：
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
实例：
h2.pos_top
{
position:relative;
top:-50px;
}
相对定位元素经常被用来作为绝对定位元素的容器块。
4、Absolute定位
绝对定位（Absolute positioning）是一种 CSS 定位方式，它使元素的位置相对于最近的已定位父元素进行偏移。如果没有找到已定位的父元素，那么绝对定位的元素的位置将相对于 <html> 元素（文档根元素）进行定位。
实例：
h2
{
position:absolute;
left:100px;
top:150px;
}
- Absolutely 定位使元素的位置与文档流无关，因此不占据空间。
- Absolutely 定位的元素和其他元素重叠。
二、重叠的元素
元素的定位与文档流是无关的，因此使用绝对定位的元素可以覆盖页面上的其他元素。当多个被定位的元素发生重叠时，可以使用 CSS 的 z-index 属性来指定元素的堆叠顺序，即确定哪个元素应该放在前面或后面。
一个元素可以有正数或负数的堆叠顺序：
实例：
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定 z - index，最后定位在 HTML 代码中的元素将被显示在最前面。
三、所有CSS定位属性
"CSS" 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。
