世界杯是一個(gè)很神奇的運(yùn)動(dòng)，讓我欲罷不能的想?yún)⑴c其中。于是我買德國(guó)贏--德國(guó)輸了，巴西贏--巴西平了，哥倫比亞贏...。最近真的有點(diǎn)屋漏偏逢連夜雨不僅世界杯屢屢爆冷門，買的幾只基金也像過山車一樣，剎不住車 順流而下。
好了，開始說一下我今天要寫的定位屬性--position。其實(shí)我最近一直在想一個(gè)問題，如果用大家都能懂得思維解釋一個(gè)問題，希望能給讀者營(yíng)造一個(gè)輕松的環(huán)境，又能讓讀者學(xué)到知識(shí)。
一、介紹定位這一家子
首先我們談一談positon，他是規(guī)定元素的定位類型。即元素脫離文檔流的布局，在頁面的任意位置顯示。而在position中生活著四個(gè)孩子：
- 相對(duì)定位（大娃）relative：不脫離文檔流的布局，只改變自身的位置，在文檔流原先的位置遺留空白區(qū)域。定位的起始位置為此元素原先在文檔流的位置。
- 絕對(duì)定位（二娃）absolute：**脫離文檔流的布局，遺留下來的空間由后面的元素填充。定位的起始位置為最近的父元素(postion不為static)，否則為Body文檔本身。
- 固定定位 （三娃）fixed ：固定定位；類似于absolute，但不隨著滾動(dòng)條的移動(dòng)而改變位置。
- 默認(rèn)定位 （四娃）static：默認(rèn)值；默認(rèn)布局。
二、 技能介紹
上面大概也介紹了幾口子的一些基本屬性，但就算他脫離了基本的文檔流，但是沒有一個(gè)基本的技能還是無法來一場(chǎng)說走就走的旅游。于是我們?cè)谙旅娼榻B一下他的幾個(gè)技能。（注意四娃比較懶惰，并沒有學(xué)習(xí)這幾項(xiàng)技能）
①left ： 表示向元素的左邊插入多少像素，使元素向右移動(dòng)多少像素(負(fù)數(shù)向左)。
②right ：表示向元素的右邊插入多少像素，使元素向左移動(dòng)多少像素(負(fù)數(shù)向右)。
③top ：表示向元素的上方插入多少像素，使元素向下移動(dòng)多少像素(負(fù)數(shù)向下)。
④bottom ：表示向元素的下方插入多少像素，使元素向上移動(dòng)多少像素(負(fù)數(shù)向上)。
二、有底線的大娃--相對(duì)定位
首先 我們先結(jié)合一下代碼看一下大娃的定義：
<!DOCTYPE html>
<html>
<head>
<title>position測(cè)試</title>
<style type="text/css">
.main{
width: 600px;
height: 600px;
margin-left: 200px;
margin-top: 200px;
background: red;
}
.dawa {
position: relative;
width: 100px;
height: 100px;
background: blue;
left:600px;
top: 200px;
}
.erwa {
width:100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="main">
<div class="dawa"></div>
<div class="erwa"></div>
</div>
</body>
</html>
效果如下：
某一天，大娃告訴未覺醒的二娃說，我想出去玩玩。然后二娃心想：大娃的房間比較舒服，于是就想著大娃出去之后，來一波鳩占鵲巢。但是卻發(fā)現(xiàn)大娃雖然走了，但是大娃卻把房間的門給鎖上了。并且從上面的圖示我們可以發(fā)現(xiàn)大娃是一個(gè)非常守規(guī)矩的小伙子，他只會(huì)相對(duì)于自己的位置進(jìn)行移動(dòng)。
三、守規(guī)矩的二娃--絕對(duì)定位
二娃覺得大娃這個(gè)人心機(jī)很深，為什么你都出們了還把房門關(guān)上。于是在悲憤之下，二娃覺醒了，想順著大娃的軌跡去找大娃理論
<!DOCTYPE html>
<html>
<head>
<title>position測(cè)試</title>
<style type="text/css">
.main{
width: 600px;
height: 600px;
margin-left: 200px;
margin-top: 200px;
border: 1px solid black;
}
.dawa {
position: relative;
width: 100px;
height: 100px;
background: blue;
left:600px;
top: 50px;
}
.erwa {
width:100px;
height: 100px;
background: yellow;
position: absolute;
left:600px;
top: 50px;
}
</style>
</head>
<body>
<div class="main">
<div class="dawa"></div>
<div class="erwa"></div>
</div>
</body>
</html>
效果圖如下：
等到二娃觸發(fā)技能的時(shí)候，按照大娃的軌跡旅行完了之后 卻發(fā)現(xiàn)自己迷路了。等到大娃回來的時(shí)候，也發(fā)現(xiàn)二弟不見了。
這里可以發(fā)現(xiàn) 二娃（absolute）是根據(jù)瀏覽器來進(jìn)行偏移的，所以和大娃（relative）相對(duì)于本身偏移的路徑不同。于是生氣的大娃決定用自己的黑魔法將整個(gè)房間給圈起來。
<!DOCTYPE html>
<html>
<head>
<title>position測(cè)試</title>
<style type="text/css">
.main{
width: 600px;
height: 600px;
margin-left: 200px;
margin-top: 200px;
border: 1px solid black;
position: relative; // 黑魔法
overflow: scroll;
}
.dawa {
width:100px;
height: 100px;
background: blue;
position: absolute;
left:600px;
top: 50px;
}
.erwa {
width:100px;
height: 100px;
background: yellow;
position: absolute;
left:600px;
top: 50px;
}
</style>
</head>
<body>
<div class="main">
<div class="dawa"></div>
<div class="erwa"></div>
</div>
</body>
</html>
使用完黑魔法的大娃回到旅游的去處了，繼續(xù)玩耍。在大娃的敦敦教導(dǎo)之后，二娃便重新開始釋放技能。效果圖如下：
很多看官就會(huì)說了，命名沒有看見大娃的身影，ok，那我們讓大娃站在攝像機(jī)的前面。在大娃的css屬性中添加一行
z-index: 100;，效果圖如下：
四、肆意妄為的三娃--固定定位
看到二娃和大娃在旅游那里玩的嗨的不行，三娃一想我也有技能于是便發(fā)功順著大娃和二娃的足跡去追尋。
<!DOCTYPE html>
<html>
<head>
<title>position測(cè)試</title>
<style type="text/css">
.main{
width: 600px;
height: 600px;
margin-left: 200px;
margin-top: 200px;
border: 1px solid black;
position: relative; // 黑魔法
overflow: scroll;
}
.dawa {
width:100px;
height: 100px;
background: blue;
position: absolute;
left:600px;
top: 50px;
z-index: 100;
}
.erwa {
width:100px;
height: 100px;
background: yellow;
position: absolute;
left:600px;
top: 50px;
}
.sanwa {
width:100px;
height: 100px;
background: black;
position: fixed;
left: 600px;
top: 50px;
}
</style>
</head>
<body>
<div class="main">
<div class="dawa"></div>
<div class="erwa"></div>
<div class="sanwa"></div>
</div>
</body>
</html>
效果圖：
但是當(dāng)四娃的技能用完卻發(fā)現(xiàn)自己和二娃一樣也是迷路了，并且大娃的黑魔法也沒有了什么作用。
五、總結(jié)
相信有前面的一些小例子，大家也差不多都明白了position的含義：
1、 relative定位會(huì)相對(duì)于自身進(jìn)行偏移，并且并在文檔流中留下空白區(qū)域。
2、 absolute定位如果在沒加限制的情況下會(huì)以瀏覽器的四個(gè)角進(jìn)行偏移。
3、 如果父容器的定位屬性是relative，則absolute會(huì)以父容器的四周為起始點(diǎn)進(jìn)行偏移。
4、 fixed定位不受到任何的拘束，始終會(huì)以瀏覽器四個(gè)角進(jìn)行偏移
說在最后
這篇是我想了很久才正式寫下來的文章，我主要重新讀了之前的文章發(fā)現(xiàn)以前寫的文章比較的無趣，讓人看了之后有種想睡覺的欲望，我可不想這樣。所謂之學(xué)習(xí)就應(yīng)該是快樂的，我希望能用這種方式感染、幫忙到每一個(gè)人。好了，睡午覺去了...
