z-index ie6下的解決方案
發(fā)布時間:2010-08-27 00:51:26 作者:佚名
我要評論

非同輩元素,任意一者或其祖元素?fù)碛袆討B(tài)定位時,同時各自向上尋找動態(tài)定位的祖元素至共有的祖元素的下一級為止,并分別從中拿出具備最高級別的祖元素(或其本身)進(jìn)行比較。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="author" content="Chomo" />
- <link rel="start" href="http://www.14px.com" title="Home" />
- <title>法則五:非同輩元素,任意一者或其祖元素?fù)碛袆討B(tài)定位時,同時各自向上尋找動態(tài)定位的祖元素,并分別從中拿出具備最高級別的祖元素(或其本身)進(jìn)行比較。</title>
- </head>
- <style type="text/css">
- div { font:12px/1.5 arial;}
- div strong { color:#fff; background:#036; display:inline-block;}
- h3 strong { color:#f00;}
- /*--- 定義方塊外形 ---*/
- .div1,
- .div2 {
- height:70px;
- width:150px;
- background:#cff;
- border:1px solid #036;
- }
- .grandDiv1,
- .grandDiv2 {
- padding:10px;
- border:1px solid #060;
- width:174px;
- background:#cf9;
- }
- .parentDiv1,
- .parentDiv2 {
- padding:10px;
- border:1px solid #f06;
- width:152px;
- background:#fcf;
- }
- /*--- 定義方塊偏移位置、文字位置 ---*/
- .grandDiv2 {
- margin-top:-50px;
- margin-left:95px;
- }
- .parentDiv2 {
- margin-top:-40px;
- margin-left:85px;
- }
- .div2 {
- margin-top:-20px;
- margin-left:75px;
- padding-top:30px;
- height:40px;
- }
- .grandDiv2 .parentDiv2,
- .grandDiv2 .div2,
- .parentDiv2 .div2 { margin:0;}
- </style>
- <body>
- <h3>法則五<strong>(重要)</strong>:非同輩元素,任意一者或其祖元素?fù)碛袆討B(tài)定位時,同時各自向上尋找動態(tài)定位的祖元素至共有的祖元素的下一級為止,并分別從中拿出具備最高級別的祖元素(或其本身)進(jìn)行比較。</h3>
- <p>情況1:子元素的z-index無論多大,父元素大者居上。<p>
- <div class="parentDiv1" style="position:relative; z-index:2;">
- .parentDiv1{position:relative;<strong>z-index:2</strong>}
- <div class="div1">.div1{position:static}</div>
- </div>
- <div class="parentDiv2" style="position:relative; z-index:1;">
- <div class="div2" style="position:relative; z-index:10000;">.div2{position:relative;<strong>z-index:10000</strong>}</div>
- .parentDiv2{position:relative;<strong>z-index:1</strong>}
- </div>
- <p>情況2:父元素居下,子元素也可以居上。<p>
- <div class="parentDiv1">
- .parentDiv1{position:staitc}
- <div class="div1" style="position:relative;">.div1{position:relative}</div>
- </div>
- <div class="parentDiv2">
- <div class="div2">.div2{position:staitc}</div>
- .parentDiv2{position:staitc}
- </div>
- <p>情況1、情況2結(jié)合擴(kuò)展比較。<p>
- <div class="grandDiv1" style="position:relative; z-index:3;">
- .grandDiv1{position:relative;<strong>z-index:3</strong>}
- <div class="parentDiv1">
- .parentDiv1{position:staitc}
- <div class="div1" style="position:relative; z-index:10000;">.div1{position:relative;<strong>z-index:10000</strong>}</div>
- </div>
- </div>
- <div class="grandDiv2">
- <div class="parentDiv2" style="position:relative; z-index:4;">
- <div class="div2">.div2{position:staitc}</div>
- .parentDiv2{position:relative;<strong>z-index:4</strong>}
- </div>
- .grandDiv2{position:static;}
- </div>
- </body>
- </html>
相關(guān)文章
IE6 select z-index無效,遮擋div bug的解決方法
在最近的一個項目中,遇到了IE6 select遮擋div的bug,為了解決這個bug我查了很多資料,試圖找到一個最最有效的方法,很多人是通過iframe的方法來解決,其實我查了國外的很2010-06-18div層調(diào)整z-index屬性在IE中無效原因分析及解決方法
在寫css代碼時發(fā)現(xiàn)了一個很簡單卻又很多人應(yīng)該碰到的問題,設(shè)置Z-INDEX屬性無效,要讓z-index起作用有個小小前提,就是元素的position屬性要是relative,absolute或是fixed2013-02-20- 設(shè)置z-index時必須要固定位置,這樣設(shè)置它的值時才能奏效(例如 position:absolute;)下面是示例代碼,在ff3.5.5和ie5.5~ie8.0RC1中通過,大家可以嘗試著不固定其位置試試2009-11-26
- 下面小編就為大家?guī)硪黄猧e6 z-index不起作用的完美解決方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09