css-position定位+z-index

position

1. 定位（position)（重点）

设定元素在文档中的位置。会将标签（元素）转换为块级。

2. 定位分类（属性值）

2.1 static:静态定位

默认值，没有定位，不能设置偏移值(left/top/right/bottom)，占用标准流（文档流）

2.2 relative:相对定位

占用标准流（文档流），它仍然会占用出文档流中它的位置，做偏移后，其他元素的位置不会改变。可以通过设置偏移值改变其位置。它相对于自身所占的位置做偏移。

#box {
position: relative;
left: 30px;
top: 20px;
}

2.3 absolute:绝对定位

• 脱离文档流，做了绝对定位的元素相当于在原来的位置浮起来，其他元素的位置会其占用空出来的位置，，默认相对于body做偏移。多用于制作叠加
• 绝对定位(absolute)一般与相对定位(relative)结合使用，绝对定位相对于relative定义的元素做偏移，relative的元素必须是absolute的父级。

#box {
 position: absolute;
 left: 30px;
 top: 20px;
}

在项目开发中，一般用relative+absolute结合使用。

2.4 fixed:固定定位

• 脱离文档流，相对于浏览器窗口左上角（0，0）做偏移，它与relative设定的对象没有关系，也就是说，它跟父级的定位没有任何关系。
• 一般在开发中用来固定导航栏。

<!--元素会出现在屏幕的左下角-->
#box {
 position: fixed;
 left: 0px;
 top: 0px;
}

z-index

1. 仅能在定位元素上起效
2. 当多个元素添加绝对定位，元素将会叠加在一起，使用z-index可以设置元素显示的层次。
3. 文档流默认的z-index的值为0，其值可以为负。
4. 用在static和relative元素上将无效。
5. 按值得大小进行元素的显示顺序

<div class="werppor">
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
	<div class="box5"></div>
	<div class="box6"></div>
</div>

<style type="text/css">
	.werppor{
		width: 600px;
		height: 400px;
		border: 1px solid #000000;
		margin: 0 auto;
		position: relative;
	}
	.box1,.box2,.box3,.box4,.box5,.box6{
		width: 150px;
		height: 150px;
		border: 1px solid #008000;
		display: inline-block;
		position: absolute;
	}
	.box1{
		background-color: #5F9EA0;
		left: 50px;
		top: 50px;
	}
	.box2{
		background-color: #FF6600;
		left: 100px;
		top: 100px;
	}
	.box3{
		background-color: #B22222;
		left: 150px;
		top: 150px;
	}
	.box4{
		background-color: #5F9EA0;
		right: 50px;
		top: 50px;
		z-index: 3;
	}
	.box5{
		background-color: #FF6600;
		right: 100px;
		top: 100px;
		z-index: 2;
	}
	.box6{
		background-color: #B22222;
		right: 150px;
		top: 150px;
		z-index: 1;
	}
</style>