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;絕對定位

以一樣的案例來使用絕對定位，默認不做定位時仍是這個樣子

當使用絕對定位以後：

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

 

一、相對於瀏覽器定位了，相對於瀏覽器上面移動30px.左邊移動40px;

二、在文字上方顯示，表示絕對定位不佔位置（就像在空中飛起來同樣，因此經常使用絕對定位來實現頁面上顯示隱藏的效果，哪怕顯示在頁面上也不會影響佈局，好比下拉菜單）

可是，絕對定位還有一個好處就是默認的參照物是瀏覽器，可是它的參照物是能夠修改的，也就是能夠設置到底相對於誰去定位，好比下拉菜單確定是相對於本身的父級去定位。

那麼設置絕對定位的參照物的使用規則是：父級相對，子級絕對！

也就是說若是一個盒子想相對本身的父級去移動位置的話，那麼就給選定好的父級position:relative;本身絕對定位：position：absolute；而且配合方向屬性移動 ，top,left,right,bottom.

如今構建一個環境，父級li,要定位的是span：

 li{text-align:center; width:80px;height:30px;line-height:30px;background:#333;float:left;margin:0 5px;position:relative;}
 span{width:78px;height:100px;background:rgba(0,153,0,0.7);border:1px solid #fff; border-top:0; position:absolute;top:30px;left:0;}

 

 

<ul>
  <li>
     <a href="#">首頁</a> 
     <span></span>
  </li>
  
   <li>
     <a href="#">案例</a> 
  </li> 
  
</ul>

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

 運行：（li是背景深灰色的導航，白色文字是a標籤的文字，綠色透明的是相似下拉菜單的span，span是經過父級li相對定位，也就是肯定參照物是li以後，本身絕對定位，而且相對父級li的移動距離爲top:30px;left:0;）

若是top:0;的話，那麼應該就是和父級頂部緊挨着，因此看出span絕對定位的參照物是使用了相對定位的父級li：

 li{text-align:center; width:80px;height:30px;line-height:30px;background:#333;float:left;margin:0 5px;position:relative;}
span{width:78px;height:100px;background:rgba(0,153,0,0.7);border:1px solid #fff; border-top:0; position:absolute;top:0px;left:0;}

 

 

 

position：fixed；固定定位

這個固定定位的參照物是瀏覽器，經常使用在固定在瀏覽器某一個位置上的導航條，提示，或者彈窗等，只要使用了這個固定定位，不論瀏覽器類容有多少，就算滑動瀏覽器滑塊，使用固定定位的的盒子永遠就在固定的位置：

例如淘寶網上的搜索欄和右邊指示欄：

 

 

 

z-index：調整定位的盒子的層級或者說是上下關係

既然說到定位，就少不了介紹一下z-index這個屬性；這個屬性是調整使用過定位屬性的盒子的層級關係，

例如：兩個子級都相對於父級絕對定位

.box{width:200px;height:200px;background:pink;position:relative;margin:0 auto;} 
.box01{ width:100px;height:100px;background:green;position:absolute;top:20px;left:20px;}
.box02{ width:100px;height:100px;background:red;position:absolute;top:40px;left:40px;}

 

<div class="box">
    <div class="box01">box01</div>
    <div class="box02">box02</div>	
</div>

 後面寫的盒子定位後會靠最上顯示，好比box2

若是經過z-index:整數值；來設置的話，就能夠調整box1和box2的層級關係：

	 .box{width:200px;height:200px;background:pink;position:relative;margin:0 auto;} 
	 .box01{ width:100px;height:100px;background:green;position:absolute;top:20px;left:20px;z-index:2;}
	 .box02{ width:100px;height:100px;background:red;position:absolute;top:40px;left:40px;z-index:1;}

 

 誰的值大，誰的位置就靠上：

 

這裏對定位屬性進行了簡單講解，但願幫助須要幫助的人！