定位屬性在元素中的層級關系

日期：2013-11-26  來源：攀枝花惠康網絡公司

在此刻項目產物的前端開發中跟著交互的增多，再加上html結構的語義化要求，元素的層級關系加倍主要了，經常頁面會呈現頁面某些元素會被其他元素潤飾藻飾，良多時辰我們經由過程position:relative或position:absolute，及z-index值來改變元素的層級，可是z-index過多或其值如不美觀沒有充實考慮的話，元素的層級關系會很是復雜。我這里只總結了position:relative和position:absolute在兄弟元素中的一些層級關系，有漏失蹤或者不足的處所，接待巨匠留言填補和賜正。

在了看一個近似的例子：

注重：這里把position : static這個默認的定位屬性值贊成認為沒有定位，position:relative、position:absolute和position:fixed都認為是有定位 。position:fixed在ie6下未撐持，所以本位不做實例，在其他瀏覽器下同樣合用。

一、在沒有定位屬性的兄弟元素中，一般在html結構下面的元素層級高于結構膳縵沔的元素。

可能表達不清囂張，看一段代碼吧：

<div style="width:400px; height:200px; background:#000; color:#FFF">結構膳縵沔的元素:width:400px; height:200px;<br />
這里黑色的可見高度是150px,還有50px被紅色的元素遮罩了(margin-top:-50px)。</div>
<div style="width:500px; height:100px;background:red; margin-top:-50px;color:#FFF">結構下面的元素:width:500px; height:100px;</div>

如圖顯示：

=====================朋分線===========================

<div style="width:400px; height:200px; background:#000; color:#FFF;margin-bottom:-110px;">結構膳縵沔的元素:width:400px; height:200px;<br />
這里黑色的可見高度加起來是100px,還有100px被紅色的元素遮罩了。</div>
<div style="width:500px; height:100px;background:red;color:#FFF">結構下面的元素:width:500px; height:100px;</div>

如圖顯示：

這兩個例子充實說了然一般情形下：沒有定位的兄弟元素中，在html結構下面的元素層級高于結構膳縵沔的元素。

二，兄弟元素中有定位屬性的元素層級高于沒有這兩個屬性的其他兄弟元素。

看一個在結構膳縵沔元素上加position:absolute例子，這個可能巨匠很常用：

<div style="width:400px; height:200px; background:#000; color:#FFF; position:absolute">結構膳縵沔的元素:width:400px; height:200px;<br />
這里黑色的可見高度加起來是200px,紅色的元素被遮罩了。</div>
<div style="width:500px; height:100px;background:red; color:#FFF">結構下面的元素:width:500px; height:100px;</div>

<div style="width:400px; height:200px; background:#000; color:#FFF; position:relative">結構膳縵沔的元素:width:400px; height:200px;<br />
這里黑色的可見高度加起來是200px,紅色的元素的50高度被遮罩了。</div>
<div style="width:500px; height:100px;background:red; margin-top:-50px; color:#FFF">結構下面的元素:width:500px; height:100px;</div>

如圖顯示：

三、兄弟元素中有position:relative和position:absolute定位屬性的元素，結構下面的元素層級高于結構膳縵沔的元素，可是有z-index設置時，z-index值年夜者居上。

看一個在例子：

看一個在結構膳縵沔元素上加position:relative例子，這個可以用來做良多工作，出格是選項效不美觀，還有元素不想脫離文檔流的時辰：

<div style="width:500px; height:140px; background:#000; position:relative; z-index:100"></div>
<div style="position:absolute;top:0; width:600px; height:120px;background:red; z-index:99"></div>

四、非兄弟元素，肆意一者或其祖元素擁有動態定位時，同時各自向上尋找動態定位的祖元素，并分袂年夜中拿出具備第一流此外祖元素（或其自己）進行斗勁。

=====================朋分線===========================

1.子元素的z-index無論多年夜，父元素年夜者居上，如圖：

2.父元素居下，子元素也可以居上，如圖：

<div style="width:800px; height:160px; background:#CDCDCD">
<div style="width:500px; height:140px; background:#000; position:relative; z-index:100">這個在最上層</div>
<div style="position:absolute;top:0; width:600px; height:120px;background:red; z-index:99"></div>
</div>
<div style="background:#00F;width:600px; height:130px; margin-top:-50px"></div>


，如圖：


或者看這段代碼：

如圖顯示：
有漏失蹤或者不足的處所，接待巨匠留言填補和賜正。

						 

							
文章來源：攀枝花惠康網絡公司
							
惠康網絡，是一家專業從事攀枝花網站建設，攀枝花網站制作，攀枝花網站設計公司，提供網站建設一條龍服務（網站域名注冊+網站服務器租用+網站開發+網站維護+網站營銷推廣），惠康網絡立足攀枝花，輻射全中國，攀枝花惠康網絡的客戶已經遍布國內各地大中小城市，我們高效優質的網站建設服務深受用戶好評。