z-index ie6下的解决方案

最新推荐文章于 2020-01-02 18:24:56 发布
最新推荐文章于 2020-01-02 18:24:56 发布
阅读量566 收藏
点赞数
分类专栏： CSS 文章标签： ie border div 扩展


        文章源链接：http://www.jb51.net/css/29329.html


      

点评：非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素至共有的祖元素的下一级为止，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。


XML/HTML Code 复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.         <meta name="author" content="Chomo" />  
  6.         <link rel="start" href="http://www.14px.com" title="Home" />  
  7.         <title>法则五：非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。</title>  
  8.     </head>  
  9.     <style type="text/css">  
  10.         div { font:12px/1.5 arial;}   
  11.         div strong { color:#fff; background:#036; display:inline-block;}   
  12.         h3 strong { color:#f00;}   
  13.         /*--- 定义方块外形 ---*/   
  14.         .div1,   
  15.         .div2 {   
  16.             height:70px;   
  17.             width:150px;   
  18.             background:#cff;   
  19.             border:1px solid #036;   
  20.         }   
  21.         .grandDiv1,   
  22.         .grandDiv2 {   
  23.             padding:10px;   
  24.             border:1px solid #060;   
  25.             width:174px;   
  26.             background:#cf9;   
  27.         }   
  28.         .parentDiv1,   
  29.         .parentDiv2 {   
  30.             padding:10px;   
  31.             border:1px solid #f06;   
  32.             width:152px;   
  33.             background:#fcf;   
  34.         }   
  35.         /*--- 定义方块偏移位置、文字位置 ---*/   
  36.         .grandDiv2 {   
  37.             margin-top:-50px;   
  38.             margin-left:95px;   
  39.         }   
  40.         .parentDiv2 {   
  41.             margin-top:-40px;   
  42.             margin-left:85px;   
  43.         }   
  44.         .div2 {   
  45.             margin-top:-20px;   
  46.             margin-left:75px;   
  47.             padding-top:30px;   
  48.             height:40px;   
  49.         }   
  50.         .grandDiv2 .parentDiv2,   
  51.         .grandDiv2 .div2,   
  52.         .parentDiv2 .div2 { margin:0;}   
  53.     </style>  
  54.     <body>  
  55.         <h3>法则五<strong>（重要）</strong>：非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素至共有的祖元素的下一级为止，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较。</h3>  
  56.         <p>情况1：子元素的z-index无论多大，父元素大者居上。<p>  
  57.             <div class="parentDiv1" style="position:relative; z-index:2;">  
  58.                 .parentDiv1{position:relative;<strong>z-index:2</strong>}   
  59.                 <div class="div1">.div1{position:static}</div>  
  60.             </div>  
  61.             <div class="parentDiv2" style="position:relative; z-index:1;">  
  62.                 <div class="div2" style="position:relative; z-index:10000;">.div2{position:relative;<strong>z-index:10000</strong>}</div>  
  63.                 .parentDiv2{position:relative;<strong>z-index:1</strong>}   
  64.             </div>  
  65.         <p>情况2：父元素居下，子元素也可以居上。<p>  
  66.         <div class="parentDiv1">  
  67.             .parentDiv1{position:staitc}   
  68.             <div class="div1" style="position:relative;">.div1{position:relative}</div>  
  69.         </div>  
  70.         <div class="parentDiv2">  
  71.             <div class="div2">.div2{position:staitc}</div>  
  72.             .parentDiv2{position:staitc}   
  73.         </div>  
  74.         <p>情况1、情况2结合扩展比较。<p>  
  75.         <div class="grandDiv1" style="position:relative; z-index:3;">  
  76.             .grandDiv1{position:relative;<strong>z-index:3</strong>}   
  77.             <div class="parentDiv1">  
  78.                 .parentDiv1{position:staitc}   
  79.                 <div class="div1" style="position:relative; z-index:10000;">.div1{position:relative;<strong>z-index:10000</strong>}</div>  
  80.             </div>  
  81.         </div>  
  82.         <div class="grandDiv2">  
  83.             <div class="parentDiv2" style="position:relative; z-index:4;">  
  84.                 <div class="div2">.div2{position:staitc}</div>  
  85.                 .parentDiv2{position:relative;<strong>z-index:4</strong>}   
  86.             </div>  
  87.             .grandDiv2{position:static;}   
  88.         </div>  
  89.     </body>  
  90. </html>  

就过如下图所示：



一个很重要的提示，IE6下z-index：0是无效的~

damon08708
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ie6中解决z-index
04-20
NULL 博文链接：https://shoushounihao.iteye.com/blog/1884481
解决IE6 z-index 无效的问题
浪迹天涯
03-01 1377
在写一个网站的样式的时候，遇到IE6 下z-index 无效的问题，整得我好“头疼”，后面查查资料，终于把这个问题给解决了，解决的方法如下： 父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时 候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。 有一定经验的人可能都知道上
z-index兼容问题:关于ie6/7下的z-index
weixin_34050389的博客
08-18 105
z-index这个属性其实在挺多地方都会用到，在百度上搜索也有大量关于z-index的篇幅去阐述这个属性，特别是在ie6下的z-index处理有更多的相关文章，本文就不再围绕z-index这一属性的基础展开叙述。这里要讨论的是最近在项目上对z-index在ie6下自己的一个认识，希望能帮助在z-index兼容上遇到问题的同行一个参考。首先是demo，点击就可以看到相关的demo了，这个demo就是...
z-index ie6
weixin_34192993的博客
11-17 55
2019独角兽企业重金招聘Python工程师标准>>> ...
ie6下z-index不起作用？
一名普通码农的菜地
12-17 889
首先请明确，无论哪一个浏览器下面，z-index的元素要带有position（relative,fixed,absolute）才能起作用。 明确以后看看这个文章： http://www.yuanchuang.net/content/14172.html 在ie6，7以外的浏览器，z-index似乎都是根据当前元素来进行z-index的布局的，但是对于ie6，ie7，似乎是层次最高
z-index 无效解决方法
热门推荐
MichaelAn的博客
01-02 7万+
在工作中遇到这样一个问题：设置一个DIV z-index 很大，但是仍然被其他元素遮挡。 例如：左侧的若干图标 z-index 依次增加，右侧的四个图标也需要设置 z-index。 如果界面中同一个位置有多个元素层叠，可以设置 z-index 设置不同元素的层级。 有时候遇到设置 z-index 后无效的原因，下面简单分析： 父级元素溢出隐藏或者不显示 如果父元素设置了 overflow:hidd......
关于IE7 z-index的浏览器兼容性问题完美解决方案
12-13
浏览器兼容性问题太让人蛋疼了，今天可是废在了IE7的z-index问题上。可又不能因为浏览器版本低而不去解决，毕竟要从用户的角度着想。百度了好多还是无法解决，最后google了一下，找到了方法。 直接上例子： 复制...
css3的transform造成z-index无效解决方案
01-19
只锁头效果很好，IE11下会小抖，但chrome下很稳定停在那里。后来又加上锁定列，发现列会盖住表头。 百度到这里《小心 CSS3 Transform 引起的 z-index 失效》 “CSS3 Transform create new stacking context” 这个...
spring java图片上传源码.rar
04-26
源码实现了图片上传功能，可供相关功能开发的小伙伴参考学习使用。
新入职员工工作总结范文大全(篇).docx
04-26
工作总结，新年计划，岗位总结，工作汇报，个人总结，述职报告，范文下载，新年总结，新建计划。
本项目内容为《SpringBoot 2.X 基础教程》配套源码.zip
04-26
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
IMG_20240426_195457.jpg
04-26
IMG_20240426_195457.jpg
培训看版.xlsx
04-26
Excel数据看板，Excel办公模板，Excel模板下载，Excel数据统计，数据展示
A Confidence-Guided Automated System for Non-emergency Calls.pdf
04-26
A Confidence-Guided Automated System for Non-emergency Calls.pdf
用于快速反馈控制律优化的梯度丰富机器学习控制matlab代码.zip
最新发布
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
杭州电子科技大学数据结构数据结构讲义.pdf
04-26
杭州电子科技大学，期末考试资料，计算机专业期末考试试卷，试卷及答案，数据结构。
对保险业中人工智能的监管： 平衡消费者保护与创新.pdf
04-26
对保险业中人工智能的监管： 平衡消费者保护与创新.pdf
重庆大学电磁场原理10年考题(a卷)答案及评分标准.pdf
04-26
重庆大学期末考试试卷，重大期末考试试题，试题及答案
说下z-index属性
05-04
z-index是CSS中的一个属性，用于控制元素的堆叠顺序。当有多个元素重叠在一起时，z-index属性可以指定哪个元素应该出现在哪个元素的前面。 z-index属性的值是一个整数，可以为正数、负数或0。值越大的元素会被放置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值