<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style type="text/css">
.con{
width: 500px;
border: 1px solid #000;
}
.con div{
width: 200px;
height: 200px;
position: absolute;
}
.box1{
background-color: gold;
left:20px;
top:20px;
z-index:11;
}
.box2{
background-color: cyan;
left:40px;
top:40px;
z-index:22;
}
.box3{
background-color: lime;
left:60px;
top:60px;
z-index:1;
}
.box4{
background-color: plum;
left:80px;
top:80px;
z-index:3;
}
.box5{
background-color: yellow;
left:100px;
top:100px;
background: url(images/telephone.jpg) 10px 10px no-repeat;
/* 图片局部定位,可以通过浏览器的检查元素,更改上面的两个值,用上下键或者pgUPpgDOWN控制找到最合适的位置 */
}
/*
在定位中
相对定位relative(adj.相对的;n.亲戚) 是相对元素自己原本的位置来定位的;
!在使用相对定位的时候,元素原本的位置===>依旧存在.
绝对定位absolute(adj.绝对的) 是相对与父集来定位.如果父集没有定位属性的话,就继续追溯,直到body.
!在使用绝对定位的时候,元素原本的位置===>不再存在.
固定定位fixed(v.固定的,确定的,维修;n.困境) 是相对整个浏览器屏幕来进行定位的.所以不管父集或者设置没有设置定位属性,都以整个屏幕作为定位属性.
!和绝对属性相同,在使用固定定位的时候,元素原本的位置===>不再存在.
*/
/*
z-index中
数字代表级别
默认级别无.
设置级别后,级别越大,元素越靠上.
同级别元素,后来者居上.
*/
</style>
</head>
<body>
<!-- div.con>div.box${$}*5 -->
<div class="con">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</body>
</html>
