html頁面重疊錯誤巫糙，多數(shù)還是position定位情況下z-index的問題环揽。

?元素位置重疊的背景常識

?(x)html文檔中的元素默認(rèn)處于普通流（normal flow）中，其順序由元素在文檔中的先后位置決定捌肴，此時一般不會產(chǎn)生重疊（但指定負(fù)邊距可能產(chǎn)生重疊）式矫。當(dāng)我們用css為某個元素指定 float浮動或者position定位后，元素的定位將會依情況發(fā)生如下改變：

1. 指定float值left/right??? ?行內(nèi)元素也會隱形變成塊元素预明，元素會脫離文檔的普通流缩赛，向左或右浮動，直到其外邊緣碰到包含框或另一個浮動框撰糠。

?2. 指定position值relative??? 可以相對于其在普通流中的位置偏移酥馍，原本所占的空間仍保留。

?3. 指定position值absolute????? 行內(nèi)元素也會隱形變成塊元素阅酪，元素會脫離文檔的普通流旨袒，相對于最近的已定位祖先元素偏移，如果元素沒有已定位的祖先元素术辐，那么它的位置相對于最初的包含塊偏移砚尽。

?4. 指定position值fixed???? 元素會脫離文檔的普通流，相對于瀏覽器窗口偏移辉词，固定在瀏覽器的某個位置必孤。

以上四種情況下，文檔中的元素都將可能被浮動/定位元素覆蓋產(chǎn)生重疊瑞躺。 元素位置重疊的可能原因

?1. 負(fù)邊距/float浮動 margin為負(fù)值時元素會依參考線向外偏移隧魄。margin-left/margin-top的參考線為左邊的元素/上面的元素（如無兄弟元素則為 父元素的左內(nèi)側(cè)/上內(nèi)側(cè)）,margin-right和margin-bottom的參考線為元素本身的border右側(cè)/border下側(cè)。一般可以利 用負(fù)邊距來就行布局隘蝎，但沒有計算好的話就可能造成元素重疊购啄。堆疊順序由元素在文檔中的先后位置決定，后出現(xiàn)的會在上面嘱么。 浮動元素會脫離文檔的普通流狮含，有可能覆蓋或遮擋掉文檔中的元素。

?2. position的relative/absolute/fixed定位 當(dāng)為元素設(shè)置position值為relative/absolute/fixed后曼振，元素發(fā)生的偏移可能產(chǎn)生重疊几迄，且z-index屬性被激活。 z-index值可以控制定位元素在垂直于顯示屏方向（Z 軸）上的堆疊順序（stack order）冰评，值大的元素發(fā)生重疊時會在值小的元素上面映胁。

?3. window窗口元素引發(fā)的重疊 瀏覽器解析頁面時，先判斷元素的類型：窗口元素優(yōu)于非窗口元素顯示（也就是窗口元素會覆蓋在其它非窗口元素之上）甲雅，同為非窗口類型才能在激活z-index屬性控制堆疊順序解孙。

Flash元素屬于window窗口元素

?所以如果頁面上flash元素和其他元素發(fā)生重疊坑填，需要先將flash嵌入的wmode屬性的window（窗口，默認(rèn)的會造成上面所說的問題）改為非窗口模式：opaque（非窗口不透明）或者 transparent（非窗口透明）弛姜。

ie6下select屬于window類型控件

同理脐瑰，它也產(chǎn)生窗口元素的遮擋問題。解決方法使用iframe（原理：ie6下普通元素?zé)o法覆蓋select廷臼，iframe可以覆蓋select苍在， 普通元素可以覆蓋iframe）/用div模擬實現(xiàn)select的效果。我一般會為被select遮擋的div在內(nèi)部追加（appendChild）一個 空的子iframe荠商，設(shè)置position:absolute脫離文檔流空間寂恬、width:100%;height:100%;覆蓋整個父div、z- index:-1;確保值要小于父div的z-index值讓父div覆蓋顯示在iframe上面莱没，借助這個iframe來覆蓋select初肉。

淺說position定位及z-index使用

使用前提：

?z-index只能在position屬性值為relative或absolute或fixed的元素上有效。

基本原理 ：

z-index值可以控制定位元素在垂直于顯示屏方向（Z 軸）上的堆疊順序（stack order）郊愧，值大的元素發(fā)生重疊時會在值小的元素上面朴译。

使用的相對性：

?z-index值只決定同一父元素中的同級子元素的堆疊順序。父元素的z-index值（如果有）為子元素定義了堆疊順序（css版堆疊“拼 爹”）属铁。向上追溯找不到含有z-index值的父元素的情況下眠寿，則可以視為自由的z-index元素，它可以與父元素的同級兄弟定位元素或其他自由的定位 元素來比較z-index的值焦蘑，決定其堆疊順序盯拱。同級元素的z-index值如果相同，則堆疊順序由元素在文檔中的先后位置決定例嘱，后出現(xiàn)的會在上面。 所以如果當(dāng)你發(fā)現(xiàn)一個z-index值較大的元素被值較小的元素遮擋了拼卵，請先檢查它們之間的dom結(jié)點關(guān)系奢浑，多半是因為其父結(jié)點含有激活并設(shè)置了z-index值的position定位元素。 也因為這個相對性腋腮，還會引發(fā)瀏覽器表現(xiàn)不一致出現(xiàn)兼容問題雀彼。原因是ie6聪富、7下面position值為非static的元素在未設(shè)置z-index值的情況下都會被隱含添加z-index:0，而Firefox/Chrome等現(xiàn)代瀏覽器會遵循標(biāo)準(zhǔn)默認(rèn)z-index:auto不會產(chǎn)生值炕横。

負(fù)值的z-index也依照大小比較的原理嗽交，但一般來說負(fù)值的z-index會被透明的body覆蓋導(dǎo)致點擊等事件響應(yīng)出現(xiàn)問題沃疮，請謹(jǐn)慎使用邑茄。