上節(jié)課我們講了 fixed 定位，那么現(xiàn)在我們來簡單回顧一下他。fixed 定位就是鎖定元素和瀏覽器的相對位置，無論怎么滾動頁面，這兩者之間是相對靜止的。然后還有一個細節(jié)上一節(jié)我們沒有注意哦！
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>這些代碼不多說，都知道怎么回事，除了這個定位方式，看了效果我們來說。
如果沒有定位，就是這四個格子排排坐，但是不給果果吃，所以無聊的很。但是我給第一個元素做了 relative 定位，這是啥意思呢？就是叫這排排坐的某一位小朋友出來唱個歌。唱完他還回去坐，對吧，所以他的位置要留著，不能他出來唱歌別的小朋友就坐過去，要不然唱完歌回來發(fā)現(xiàn)沒位子了要哭的。所以你看后面的小朋友還都坐在那里，雖然前面有了一個空著的位置。
然后呢，去唱歌的小朋友站在舞臺上，他不會影響到坐著的那些小朋友，雖然我們看到他擋住了后面坐的的小朋友，但是只是視線上的遮擋，并不會發(fā)生什么肢體上的沖突，否則……去看演唱會什么的也太爽了點。
然后就是位置問題，其實也挺簡單的，left 就是現(xiàn)在位置的左邊緣距離原來位置的左邊緣的距離。就是老師說，小紅，來，起來給大家唱個歌，從你座位開始，向前走兩步，再向右走三步，站在那里唱（這個老師是個逗[嗶~]）。那么小紅唱歌的位置跟她坐著的時候左手移動的距離是三步，而后背移動的相對距離是兩步，這都很好理解。
那么，現(xiàn)在我們知道了 relative 的定位方式，在文檔流中保留原有位置，然后基于原來的位置進行偏移。現(xiàn)在仔細想想，跟 fixed 的區(qū)別還是蠻大，很好記。但是跟下一節(jié)要學的就容易混淆了，所以先把今天的記牢再看下一節(jié)。
本章代碼下載：本章代碼
本書是收費的，不過交費憑自覺。價格定義為每人請我喝一杯咖啡（哪種品質的咖啡隨意），支付寶賬號：
alay9999@163.com （劉源）
為了讓大家閱讀方便，本書將在如下站點發(fā)布，但最終內容以主站為準：
未經本人許可，禁止任何形式轉載。相關事宜請聯(lián)系： dms@zji.me
掃碼關注鍍金池微信號
手機訂課，優(yōu)惠多多