上节课我们讲了 fixed 定位，那么现在我们来简单回顾一下他。fixed 定位就是锁定元素和浏览器的相对位置，无论怎么滚动页面，这两者之间是相对静止的。然后还有一个细节上一节我们没有注意哦！
fixed 定位的元素不在文档流内！这只箱子从传送带上拿出来了，挂在浏览器上一动不动的。所以他和传送带上的箱子互不影响，传送带上也没有他的位置。
然后再来认识一个新的定位方式：relative，不解释，先看例子再说话。
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>relative 定位实例</title>
<style>
div {
width: 50%;
height: 200px;
float: left;
color: #FFF;
font-size: 48px;
text-align: center;
line-height: 200px;
}
#a {
background: #C00;
position: relative;
left: 100px;
top: 100px;
}
#b {
background: #0C0;
}
#c {
background: #00C;
}
#d {
background: #CC0;
}
</style>
</head>
<body>
<div id=“a”>我是那个被定位了的格子</div>
<div id=“b”>我是打酱油的格子，老大</div>
<div id=“c”>我是打酱油的格子，老二</div>
<div id=“d”>我是打酱油的格子，老三</div>
</body>
</html>
这些代码不多说，都知道怎么回事，除了这个定位方式，看了效果我们来说。
![图片[1]-第三十七章 定位（二）-易看设计 - 专业设计师平台](http://coffee.zji.me/imgs/37-1.png)
如果没有定位，就是这四个格子排排坐，但是不给果果吃，所以无聊的很。但是我给第一个元素做了 relative 定位，这是啥意思呢？就是叫这排排坐的某一位小朋友出来唱个歌。唱完他还回去坐，对吧，所以他的位置要留着，不能他出来唱歌别的小朋友就坐过去，要不然唱完歌回来发现没位子了要哭的。所以你看后面的小朋友还都坐在那里，虽然前面有了一个空着的位置。
然后呢，去唱歌的小朋友站在舞台上，他不会影响到坐着的那些小朋友，虽然我们看到他挡住了后面坐的的小朋友，但是只是视线上的遮挡，并不会发生什么肢体上的冲突，否则……去看演唱会什么的也太爽了点。
然后就是位置问题，其实也挺简单的，left 就是现在位置的左边缘距离原来位置的左边缘的距离。就是老师说，小红，来，起来给大家唱个歌，从你座位开始，向前走两步，再向右走三步，站在那里唱（这个老师是个逗[哔~]）。那么小红唱歌的位置跟她坐着的时候左手移动的距离是三步，而后背移动的相对距离是两步，这都很好理解。
那么，现在我们知道了 relative 的定位方式，在文档流中保留原有位置，然后基于原来的位置进行偏移。现在仔细想想，跟 fixed 的区别还是蛮大，很好记。但是跟下一节要学的就容易混淆了，所以先把今天的记牢再看下一节。
本章代码下载：本章代码
暂无评论内容