# CSS position属性
[TOC]
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
我们已经学习了普通流和浮动的相关内容，本节我们介绍定位相关内容。
position属性设置元素定位类型，可以通过top,bottom,right,left属性，控制元素的定位位置。
position属性值有static，relative，absolute，fixed四个值。
## static静态定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top,bottom,right,left属性的影响。
## fixed固定定位
* 脱离标准流，在页面中不占位置 。
* 不管页面有多大，永远相对于浏览器的边框来定位 。
```css
*{
margin: 0;
padding: 0;
}
.c1{
width: 100px;
height: 100px;
background-color: brown;
}
.c2{
width: 100px;
height: 100px;
background-color: blue;
}
.c3{
width: 100px;
height: 100px;
background-color: black;
position: fixed;/*固定定位，不占位置，永远相对于浏览器来定位，不管窗口上下拉动，都不会消失（如广告位）*/
left:20px;
top:20px;
}
```
```html
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>...
</body>
```
## relative 相对定位
* 不脱离标准流，在页面中占位置 。
* 相对于自己原来的位置来进行定位 。
```css
*{
margin: 0;
padding: 0;
}
.c1{
width: 100px;
height: 100px;
background-color: brown;
}
.c2{
width: 100px;
height: 100px;
background-color: blue;
position: relative;/*相对定位，占位置，相对于自己原来的位置定位*/
left: 20px;
top:20px;
}
.c3{
width: 100px;
height: 100px;
background-color: black;
}
```
```html
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
```
## absolute绝对定位
* 脱离标准流，在页面中不占位置（浮起来）。
* 如果没有父元素，则相对于body定位；如果有父元素，但父元素没有定位，那么还是相对于body定位；如果父元素有定位，那么相对于父元素来定位。
```css
*{
margin: 0;
padding: 0;
}
.c1{
width: 100px;
height: 100px;
background-color: brown;
position: absolute;/*绝对定位，不占位置，无父级定位则相对于body来定位*/
left:20px;
top:20px;
}
.c2{
width: 100px;
height: 100px;
background-color: blue;
}
.c3{
width: 100px;
height: 100px;
background-color: black;
}
```
```html
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
```
## 定位元素的重叠
* `z-index`属性控制定位元素的重叠顺序，属性值是z轴上的值。
* `z-index`的值是设置一个定位元素沿Z轴的位置，其值越大，离用户越近，所以若两个定位元素，`z-index`值越大的将会覆盖值越小的定位元素。
默认值是0，可以是正负数。
下面首先不设置z-index。
~~~html
<head>
<style>
img.a2
{
position:relative;
left:0px;
top:-60px;
z-index:-1;
}
.a1 {
position:relative;
z-index：-1
}
.yu {
position:relative;
left:0px;
top:30px;
z-index:auto;
background:red
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img class="a2" src="w3css.gif" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
<div class="yu">
<p>定位</p>
<img class="a1" src="w3css.gif" width="100" height="140" />
<div>
</body>
~~~
>[warning]一般而言，`z-index`的值只能与同级元素或其他自由元素比较，如果想要使父元素覆盖子元素，可以设置父元素的z-index属性值为auto，子元素的z-index值为负数
