網頁寄存的5條原則

首先明確幾點在文中所需要用到的概念:

靜態定位:position:static(為position屬性的默認值)。
動態定位:position:relative或position:absolute或position:fixed。
祖元素:任意包含該元素的元素。
父元素:直接包含該元素的祖元素。
同輩元素:擁有共同的父元素的元素。

註:這些概念為作者網頁設計自定義,僅用於本文。
引用:
關於同輩元素是個非常關鍵的詞,這裡還需要詳細解釋一下。

<div>
<div></div>
<div id="a"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="f">
<div></div>
<div id="b"></div>
<div id="c"></div>
<div></div>
<div></div>
<div></div>
</div>

在這個例子中,div#a與div#b並不是“同輩元素”,只有像div#b和div#c這樣擁有同樣父體div#f的的元素才能叫“同輩元素”。
引用結束
接下來看看這五條法則:
法則一:同輩元素定位方式相同,且無z-index設置時,html靠後者居上。

法則二:同輩元素同為動態定位時,且有z-index設置時,z-index值大者居上。

猛點這裡測試
法則三:同輩元素定位方式不同時,動態Web Design定位居上。

猛點這裡測試
法則四:非同輩元素,任意一者及其祖元素不具備動態佈局時,html靠後者居上。

猛點這裡測試
法則五:【重要】非同輩元素,任意一者或其祖元素擁有動態網站設計定位時,同時各自向上尋找動態定位的祖元素,並分別從中拿出具備最高級別的祖元素(或其本身)進行比較。

<div id="ab" style="position:absolute;">
<div id="a" style="position:relative; z-index:100;">
<div id="a_inner1">
<div id="a_inner2">
<div id="a_inner3" style="position:relative; z-index:98;">
<div id="a_inner4">
<div id="a_inner5">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="b">
<div id="b_inner1">
<div id="b_inner2">
<div id="b_inner3" style="position:relative; z-index:99;">
<div id="b_inner4">
</div>
</div>
</div>
</div>
</div>
</div>

情況1:子元素的z-index無論多大,父元素大者居上。

情況2:父元素居下,子元素也可以居上。

情況1、情況2結合擴展比較。

其實前四點都是基礎,只有第五點比較難於理解,這裡詳細解釋一下:
在這個例子中,我們來比較div#a_inner5和div#b_inner4的層疊關係。到它們所共同擁有的祖元素div#ab的下一級為止,div#a_inner5的祖元素包括:div#a,div#a_inner1,div#a_inner2,div#a_inner3,div#a_inner4;div#b_inner4的祖元素包括:div#b,div#b_inner1,div#b_inner2,div#b_inner3。然後分析它們的祖元素中具有動態定位的:div#a_inner5的祖元素中含有動態定位的元素有:div#a,div#a_inner3;div#b_inner4的祖元素中含有動態定位的元素有:div#b_inner3。然後再拿出最高級進行比較:div#a > #div#b_inner3。
父元素居下,子元素也可以居上的情況,則是利用非同輩元素在祖元素具備動態佈局時,其比較已經與position:static無關,而其祖元素卻可以通過html的位置來進行比較。
引用結束
當然,有時候還存在特例,比如flash、比如ie6中的select無法遮住,這些都屬於異常情況,大家可以自己搜索一下相關文章。

友情鏈接: CRM SEO SEO優化 網上推廣 網上廣告 搜尋器優化 網站優化 網站排名 Web Design 網頁設計 婚禮 婚禮統籌 Wedding Planner 婚禮 美容 Beauty 美髮 整容 塑身 風水 Feng Shui 風水學 環境學 寵物 Pet 環保袋 Recycle Bag 環保購物袋 珠寶 Jewellery 防火牆 Firewall 物流 Logistics 條碼 Bar Code 會計 月餅 果籃 模特兒 機場接送 機票 水上活動 水族 汽車模型 泰拳 海外升學 清潔 湯瑪士火車 滅蟲 潛水 澳門酒店 激光矯視 燒烤 營養師 物理治療 瑜珈 SEO Course SEO培訓課程 創業課程 創業賺錢 網上創業課程 青年創業 青年人創業 網上營銷 ERP POS 時裝批發 Fashion 化妝 Make Up 花店 Flower Shop 健康食品 Healthy Food 減肥 Weight Loss 網上商店 網頁設計 網頁設計模板 CMS操作視頻下載 CMS CMS視頻 Web 3.0 網路行銷 電郵服務 電子商務 認字 記憶法 Playgroup 記憶課程 記憶班 Memory course SEO Training Email Marketing 電郵廣告宣傳 電郵推廣 MBA BBA DBA PHD 博士 Hong Kong Hostel Hong Kong Guesthouse 香港賓館 香港旅館  保安服務 保險 優惠 創業 展覽會承包商 市場推廣及公關 建築及建造 撰稿及翻譯 教學進修 健康及醫療 中醫 其他治療 另類療法 康復 按摩中心 教學進修 普通診所 Spas 修甲 化妝 太陽燈 形象顧問 整容手術 會社、組織及團體 減肥 紋身及穿環 面部及皮膚護理 髮型設計及護理