的position属性指定用于一个元件（静态的，相对的，固定的或绝对的）的定位方法的类型。
position属性
该position属性指定用于元素定位方法的类型。
有四个不同的位置值：
-
static -
relative -
fixed -
absolute
那么元素使用上，下，左，右位置的属性。 然而，除非这些属性将无法正常工作position属性设置第一。 他们还根据位置值的工作方式不同。
position: static;
HTML元素被定位默认静态的。
静态定位的元素不受顶部，底部，左侧和右侧的属性。
一个元素position: static;未放置任何特殊方式; 它是根据页面的正常流动总是定位：
这里是用于CSS的：
position: relative;
与元素position: relative;相对于其正常位置被定位。
设置上，右，下，和相对定位的元素左属性将导致其调整从正常位置移开。 其它内容将不会被调整为适合由元件留下任何间隙。
这里是用于CSS的：
position: fixed;
一个元素position: fixed;相对于视，这意味着它总是停留在即使页面滚动同一个地方被定位。 顶部，右侧和底部，和left属性用于将元件定位。
一个固定的元素没有在它通常会被所在的页面留下一个缺口。
注意在页面的右下角固定的元素。 这里是用于CSS的：
position: absolute;
一个元素position: absolute;相对于最近的定位的祖先被定位（而不是相对于视定位的，像固定）。
然而; 如果绝对定位元素没有定位的祖先，它使用文档的身体，而且随着页面滚动移动。
注： "positioned"元素是它的位置是什么，除了static 。
下面是一个简单的例子：
这里是用于CSS的：
例
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
试一试» 重叠元素
当元件被定位，它们可以重叠的其他元素。
的z-index属性指定的元素（其元素应该放在前面，或后面，其他）的堆叠顺序。
一个元件可以具有正或负的叠层顺序：
这是一个标题
因为图像具有-1的z索引，它将被放置的文本之后。
以更大的堆叠顺序的元素总是与一个堆叠顺序较低的元素的前面。
 | 注意：如果两个定位元素没有重叠z-index指定，在HTML代码放置最后的元素将在顶部。 |
|---|
定位文本在图像
如何定位在图像的文字：
更多示例
设置一个元件的形状
这个例子演示了如何设置元素的形状。 该元件被裁剪成这种形状，并显示出来。
如何使用滚动显示溢出元素
这个例子演示了如何设置overflow属性来创建一个滚动条时，元素的内容太大而不能在指定区域。
如何设置浏览器自动处理溢出
这个例子演示了如何设置浏览器来自动处理溢出。
更改光标
这个例子演示了如何改变光标。
自测练习用！
所有的CSS定位属性
| 属性 | 描述 |
|---|---|
| bottom | 设置底边边缘的定位的盒子 |
| clip | 剪辑绝对定位的元素 |
| cursor | 指定要显示的光标的类型 |
| left | 设置左边距边缘的定位的盒子 |
| overflow | 指定在内容溢出元素框时会发生什么 |
| overflow-x | 指定如何处理该内容的左/右边缘是否溢出该元素的内容区域 |
| overflow-y | 指定如何处理内容的顶部/底部边缘，如果它溢出元素的内容区 |
| position | 指定的定位的类型为一个元件 |
| right | 设置右边距边缘的定位的盒子 |
| top | 设置上边距边缘的定位的盒子 |
| z-index | 设置元素的堆叠顺序 |