css中的定位屬性position

同樣的也是上課的時候發現學生難以理解的一些問題拿出來記錄一下，希望幫助初學者。

在css中定位屬性position的運用在頁面中是很常用的，特別是一些結合js來實現的一些特效經常會用到定位屬性，比如滑鼠滑過顯示被隱藏的盒子， banner的切換，還有之前寫的jquery實現京東商品分類導航的類似這樣的佈局也是要結合定位屬性來實現，但是上一次著重只寫了jquery.

那麼這次我想將定位屬性的運用拿來說一下。

定位屬性position常用的取值：relative/absolute/fixed;一般配合方向屬性使用：top,left,right,bottom.

position:relative;相對定位

相對定位是占位置的定位方式，它的參照物是自己；

首先將一個粉色的盒子div放在兩段文字中間，不作任何位置的調整：

p{ width:400px;}
div{text-align:center; width:200px;height:200px;background:pink;}

<p>因為是北方，入三月以來，都是陽光灑滿整管自己心想如何，自然現象是該來還來。這一場春雨，和風而來，先是淅瀝嗚咽，繼而雨聲成片，瞬間天地朦朧模糊，氣溫驟低，街上行人漸稀，都是能躲的就躲，能坐車的舞啊。</p>

<div>相對自己移動位置</div>

<p>　在早，我小時候，夏季的雨天，織上睡得小臉粉團，嘴角掛著微笑，玩耍興奮都帶到夢裡去了啊。</p>

接著把粉色盒子設置一個相對定位，那麼註意觀察它移動的位置是在原來自己的基礎上去移動的，並且是占位置的定位方式：

 p{ width:400px;}
 div{text-align:center; width:200px;height:200px;background:pink;position:relative;top:30px;left:40px;}

position:absolute;絕對定位

以同樣的案例來使用絕對定位，預設不作定位時還是這個樣子