z-index离奇事件及应对之策

简介:

扩展阅读:http://www.cnblogs.com/starof/p/4424926.html

    <div class="textbox">
        <div class="btmWords">援援</div>
        <img class="applink" src="images/applink.png" alt="">
    </div>

overflow: visible !important; 如果少了!important将变为

这里写图片描述

写上!important:这里写图片描述

.textbox {
     position: relative; 
    height: 125px;
    overflow: visible !important;
}

.textbox div.btmWords {
    width: 100%;
    text-align: center;
    position: absolute; 
    bottom: -15px;
    left: 0;
    z-index: 15 ;
    font-size: 24px;
    color: red;
    border: 1px solid red;
}

.textbox img.applink {
    position: absolute; 
    bottom: -100px;
    left: 50%;
    margin-left: -112.5px;
    z-index: 10;
    border: 1px solid blueviolet;
}
在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效。在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的position属性要是relativeabsolute或是fixed。
1.第一种情况(z-index无论设置多高都不起作用情况):
这种情况发生的条件有三个:
1、父标签 position属性为relative;
2、问题标签无position属性(不包括static);
3、问题标签含有浮动(float)属性。

eg:z-index层级不起作用,浮动会让z-index失效,代码如下:
1   <</code>DIV style="POSITION: relative; Z-INDEX: 9999"> 
2   <</code>IMG style="FLOAT: left" src="http://www.yuanchuang.net/uploads/allimg/131101/1A5494I0-0.jpg"> 
3   <</code>DIV>
解决办法有三个(任一即可):
1、position:relative改为position:absolute;
2、浮动元素添加position属性(如relative,absolute等);
3、去除浮动。
4、**父元素设置overflow: visible !important;**(如上例子所示)

2.第二种情况
IE6下,层级的表现有时候不是看子标签的z-index多高,而要看整个DOM tree(节点树)的第一个relative属性的父标签的层级。
eg:IE7与IE6有着同样的bug,原因很简单,虽然图片所在div当前的老爸层级很高(1000),但是由于老爸的老爸不顶用,可怜了9999如此强势的孩子没有出头之日啊!,代码如下:
1   <</code>DIV style="POSITION: relative"> 
2   <</code>DIV style="POSITION: relative; Z-INDEX: 1000"> 
3   <</code>DIV style="POSITION: absolute; Z-INDEX: 9999"> <</code>IMG src="http://www.yuanchuang.net/uploads/allimg/131101/1A3194V7-1.jpg"> <</code>DIV> 
4   <<code>DIV> 
5   <</code>DIV>
解决办法: 在第一个relative属性加上一个更高的层级(z-index:1),代码如下:
1   <</code>DIV style="POSITION: relative; Z-INDEX: 1"> 
2   <</code>DIV style="POSITION: relative; Z-INDEX: 1000"> 
3   <</code>DIV style="POSITION: absolute; Z-INDEX: 9999"> <</code>IMG src="http://www.yuanchuang.net/uploads/allimg/131101/1A3194V7-1.jpg"> </</code>DIV> 
4   </</code>DIV> 
5   </</code>DIV>
目录
相关文章
|
7月前
|
存储 人工智能 搜索推荐
睿哲信息:为什么Sitecore的DAM,成为数千家名企应对内容危机的选择?
当传播渠道越通达、传播链路越碎片、千人千面越来越深入,内容就会变得越细分、越长尾、越海量。当内容生产的量级越来越庞大的时候,我们就需要依靠数字和算法去驱动
|
7月前
|
Cloud Native 容灾 程序员
三点“揭露”内向技术人如何做好分享?
希望本文能帮助所有内向者发现自身的优势,实现由内而外的成长。
689 22
三点“揭露”内向技术人如何做好分享?
|
SQL 运维 监控
从微盟“删库”事件来谈谈企业的信息安全伪壁垒
背景:2月23日19点,我们收到系统监控报警,服务出现故障,随后我们立刻召集相关技术人员进行定位,发现大面积服务集群无法响应,生产环境及数据遭受严重破坏。我们立刻启动紧急响应机制,并与腾讯云技术团队一起研究制定生产环境和数据修复方案。
131 0
从微盟“删库”事件来谈谈企业的信息安全伪壁垒
|
人工智能 数据可视化 数据挖掘
后疫情时代,用数据支持业务恢复创造新的可能性
2020年可以说每一天都在见证历史,新冠疫情的突然造访就如同“黑天鹅”不期而至,而企业现在还不开始数字化转型就如同“灰犀牛”存在潜在风险,当下在黑天鹅和灰犀牛的夹击下,经济和市场都产生了巨大的影响。
|
传感器 人工智能 安全
后疫情时代,传统办公建筑会过时吗?
冠状病毒大流行造成的变化不仅需要调整办公室布局和空间分配。房地产专家Marco Macagnano说,他们还将把“智能”建筑运动提升到一个全新的水平。
|
人工智能 边缘计算 架构师
疫情之下,未来10年技术趋势有哪些变化?
没有一次疫情不会过去,也不会有一个春天不会到来。作为技术人,需要关注这次疫情对技术的影响,有什么技术可以在现在和未来更好的帮助对抗疫情。
3323 0
疫情之下,未来10年技术趋势有哪些变化?
|
监控 安全
卡巴斯基重拳组合 高效应对高考网站挂马
         近日,来自卡巴斯基实验室的最新消息,高考结束后,随着填报志愿及招生录取工作的展开,不少挂马犯罪集团开始趁便搭上高“考顺风车”,通过在高校、招生网站上嵌入木马、病毒达到窃取个人信息、获得经济利益的目的。
1037 0
掌握这3种避税要点,企业轻松应对税局检查
“只要有蛛丝马迹,哪可能查不到!”还记得每月你在税局申报的各种涉税数据吗?税务登记、增值税发票使用数据、税收优惠备案资料、高企资格认定、出口退税、企业财务报表...这一切都将成为税务稽查的重要“突破口”!
|
Web App开发 监控 安全
游戏安全资讯精选 2017年第十五期:网络安全人才短缺是安全事件的根源,游戏行业为典型;点评最新十大Web安全隐患;MongoDB最新漏洞缓解建议
网络安全人才短缺是安全事件的根源,游戏行业为典型;点评最新十大Web安全隐患;MongoDB最新漏洞缓解建议
2481 0