蝙蝠岛资源网 Design By www.hbtsch.com
XML/HTML Code复制内容到剪贴板
- <!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>法则五:非同辈元素,任意一者或其祖元素拥有动态定位时,同时各自向上寻找动态定位的祖元素,并分别从中拿出具备最高级别的祖元素(或其本身)进行比较。</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>:非同辈元素,任意一者或其祖元素拥有动态定位时,同时各自向上寻找动态定位的祖元素至共有的祖元素的下一级为止,并分别从中拿出具备最高级别的祖元素(或其本身)进行比较。</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结合扩展比较。<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>
标签:
z-index,ie6
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无z-index ie6下的解决方案的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]