首頁 > web前端 > css教學 > css定位z-index問題

css定位z-index問題

高洛峰
發布: 2016-11-24 11:55:22
原創
2586 人瀏覽過
  1. 某些瀏覽器下元素層級遮蓋存在bug;

    某個元素z-index設的太大,導致始終無法被遮蓋;

     js動態計算z-index,導致元素覆蓋關係部可控

    css定位z-index問題

    vc+hozxicj4KPGJyPgo8YnI+CmZmL2Nocm9tZSB6LWluZGV4IElFNi83IElFOC85IDxicj4KsrvJ6NbDICAwICBhdXRvICBhdXRvICA8YnI+Cm51bWJlciAgbnVtYmVyICBudW1iZXIgIG51bWJlciAgPGJyPgo8YnI+Cjxicj4KsuO8trnYz7W1xLHIvc+jujxicj4KPGJyPgrPyL+0vLi1473hwtujujxicj4KPGJyPgoxLiC21NPazay8ttSqy9ijrMSsyM8ou/Jwb3NpdGlvbjpzdGF0aWMpx+m/9s/CzsS1tcH3uvPD5rXE1KrL2LvhuLK4x8eww+a1xDs8YnI+Cjxicj4KMi4gttTT2s2svLbUqsvYo6xwb3NpdGlvbrK7zqpzdGF0aWPH0notaW5kZXi05tTatcTH6b/2z8J6LWluZGV4tPO1xNSqy9i74biyuMd6LWluZGV40KG1xNSqy9ijrLy0ei1pbmRleNS9tPPTxc/IvLbUvbjfOzxicj4KPGJyPgozLiBJRTYvN8/CcG9zaXRpb26yu86qc3RhdGljo6zH0notaW5kZXiyu7Tm1NrKsXotaW5kZXjOqjCjrLP9tMvWrs3itcTkr8DAxvd6LWluZGV4zqphdXRvPGJyPgo8YnI+CjQuIHotaW5kZXjOqmF1dG+1xNSqy9iyu7LO0+uy47y2udjPtbXEsci9z6Os08nP8snPsenA+tbBtMvH0notaW5kZXiyu86qYXV0b7XE1KrL2MC0ss7T67HIvc+hozxicj4KPGJyPgrU2snPw+YyteO94cLbtcS7+bShyc+ jrM7Sw8fS/cjrobC2qM67yvehsSi3x3czY7nZt720yrvjKbXEuMXE7sC01/ay47y2tcSxyL3PoaM8YnI+Cjxicj4K1Nq20M67yvfV4r5 GjrLP9wcvJ+rPJZG9tyvfWrs3io6y7ubvhuPm+3WRvbcr31tC1xLaozrvUqsvYKHBvc2l0aW9usrv c/T0LrsyavUssimtcSx7cq+uMPUqsvYcG9zaXRpb26yu86qc3RhdGljKaO6PGJyPgogIDxicj4KPGltZyBzcmM9"http://www.2cto.com/uploadfilej4KPGltZyBzcmM9"http://www.2cto.com/uploadfile/Collf1205140215014025/uploadfile/Collf12501402515025012502501250159750250139750002512500125975025002512505025025013975000251250139759969969996999699999693999639963996396390000 ">

    css定位z-index問題

    可以這樣理解:定位樹包含了dom樹中position不為staitc的全部元素。非同級元素比較層級關係可以這樣比較:

    1. 向上遍歷定位樹的父節點直到2個元素為同級元素。

    2. 根據上面的結論來最最後的比較。層級高的元素會越靠近使用者的顯示器並能覆蓋層級低的元素。


    實例一:假設上圖中所有標紅色元素position都不為static;且z-index=1,根據上面的比較規則可以知道:

    1. c > (b && b *) > (a && a *) 即元素c及c的所有定位元素層級比a、b高

    2. m > h、 g > k、d > m

    實例二:假設a的position不為static,z-index屬性不存在,定位樹中a的子元素z-index一次分別為1,2,3,4...其它定位元素z-index:1:

    1. 根據結論三有:IE6/7下b > (a && a *) 即元素b的層級比a及a的所有定位元素層級高,其它瀏覽器下:i > h > b > d 轉載請註明來源:css定位z-index問題 

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板