定位

定位

定义

position属性指定了元素的定位类型

值	描述
relative	相对定位
absolute	绝对定位
fixed	固定定位

其中,绝对定位和固定定位会脱离文档流

设置定位之后:可以使用四个方向值进行调整位置:left,top,right,bottom.

相对定位

<div class="box"></div>
.box{
	width:200px;
	height:200px;
	background-color:red;
	position:relative;
	left:100px;
}

绝对定位

<div class="box1"></div>
<div class="box2"></div>
.box1{
	width:200px;
	height:200px;
	background-color:red;
	position:absolute;
	left:50px;
}
.box2{
	width:300px;
	height:300px;
	background-color:green;
}

固定定位

<div class="box1"></div>
<div class="box2"></div>
.box1{
	width:200px;
	height:200px;
	background-color:red;
	position:fixed;
	left:50px;
}
.box2{
	width:300px;
	height:300px;
	background-color:green;
}

温馨提示

设置定位之后,相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整,如果父级元素不存在定位,则继续向上逐级寻找,直到顶层文档

<div class="box1">
<div class="box2"></div>
</div>
.box1{
	width:500px;
	height:500px;
	background-color:red;
	position:relative;
	left:50px;
}
.box2{
	width:300px;
	height:300px;
	background-color:green;
	position:absolute;
}

Z-index

z-index属性设置元素的堆叠顺序.拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的面前

<div class="box1"></div>
<div class="box2"></div>
.box1{
	width:200px;
	height:200px;
	background-color:red;
	position:absolute;
	z-index:2;
}
.box2{
	width:300px;
	height:300px;
	background-color:green;
	position:absolute;
	z-index:1;
}