CSS中元素位置的定位处理：
主要包含：相对、绝对、固定定位三种
基础概念介绍：
本案例主要介绍相对定位：还是以上一节的照片墙案例演示：
概念解释：
具体的演示代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<style type="text/css">
body {
background-color: #066;
}
ul {
width:780px;
border:1px solid red;
margin:30px auto;
/* 去掉列表前面的符号 */
list-style:none;
}
li {
width:218px;
padding:10px;
margin:10px;
border:1px solid #ccc;
background-color:#fff;
float: left;
}
p{
text-align: center;
}
/* 使用相对定位，实现鼠标悬停时，
照片抖动（产生微小的偏移）的效果。 */
li:hover {
/* 相对定位 */
position:relative;
/* 设置偏移量 */
left:2px;
top:-2px;
}
</style>
</head>
<body>
<ul>
<li>
<img alt="" src="../images/01.jpg">
<p>啊，致敬青春！</p>
</li>
<li>
<img alt="" src="../images/02.jpg">
<p>你是美好的！</p>
</li>
<li>
<img alt="" src="../images/03.jpg">
<p>多希望时光可以倒流！</p>
</li>
<li>
<img alt="" src="../images/04.jpg">
<p>只是一厢情愿的愿望而已！</p>
</li>
<li>
<img alt="" src="../images/05.jpg">
<p>把握当下就是珍惜</p>
</li>
<li>
<img alt="" src="../images/06.jpg">
<p>时光可以的定格在心中！</p>
</li>
</ul>
</body>
</html>最终页面效果：当鼠标悬停在图片上时，图片会发生相对自己向右上方的轻微偏移。
