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属性要是relative,absolute或是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>
时间: 2024-08-04 07:54:55

z-index离奇事件及应对之策的相关文章

富士康的四大客户,开始调查富士康对一系列企业员工自杀事件的应对措施

富士康的四大客户苹果.惠普.诺基亚和戴尔昨天纷纷表示,开始调查富士康对一系列企业员工自杀事件的应对措施.IT巨头都制定有相应的"供应商行为准则",要求供应商承担社会责任,为员工提供良好的工作环境和待遇.富士康接连爆出自杀事件,让这些IT巨头也承担了来自各界的压力.惠普发言人谢比沃特昨天称,惠普正对富士康可能与这些事件有关的行为进行调查.苹果公司发言人昨天也表示,苹果公司专门设立了一个独立小组来评估富士康在应对此事件中的措施.戴尔发言人杰西布拉克本也表示:"任何举报戴尔的供应链

对话盛大谭群钊:业绩下滑的应对之策

9日上午,盛大游戏董事长兼CEO谭群钊,针对盛大第二季度财报的利润下滑趋势与媒体 对话,提出了力推<龙之谷>.同CNTV合建公司等多项应对之策. 以下为谭群钊与媒体对话实录: 问:作为董事长您对今天盛大发布的财报业绩是否满意?能否透露一下七月开测的<龙之谷>,现在的运营情况?对第三季度的业绩有怎样的期待? 谭:盛大产品的更新换代,需要产品的创新.我们既有像<传奇世界>这样的游戏,它已经十年了,但运行很稳定,有一批忠实的用户.也希望通过这次的调整,让我们的产品更加年轻化,

网站遭遇不同惩罚背景下的应对之策

中介交易 SEO诊断 淘宝客 云主机 技术大厅 常在河边走哪有不湿鞋,在网站优化圈子里做事情,就少不了会遭遇网站被降权的可能,不过现在的百度对于网站降权已经不会像之前那么暴力,会采用多种方式对网站进行不同程度的惩罚,从而帮助站长改变自己的运营策略,毕竟现在运营网站也不容易,如果一棍子打死,也会遭遇很多站长们的抵制,这显然也不是百度所愿意看到的,正是如此我们要认真分析百度的不同程度的惩罚,然后再据此提出相应的应对之策,从而尽快恢复网站权重和排名. 第一,应对轻微惩罚的策略.实际上轻微惩罚从某种意义

PR大更新背后的Google逻辑和应对之策

  PR更新了!而且不是一般的小范围更新,而是大范围的更新,同时更新的力度和幅度都相当大.笔者自己的网站还有为客户优化的网站升级有从0直接升为2的,还有从0直接升为4的,在A5论坛这几天看到的情况也相似,升多降多,幅度普遍比较大,这次大规模的更新无疑彻底打破了以往流传的"Google放弃PR"的猜疑. 然而,这次Google选择在这个时机进行更新PR,背后反映了Google什么样的考虑?结合最近Google的一些动作,笔者在此和大家分享一些自己的分析和想法,特别是站长们应当如何从这次的

汇率之争看中国经济应对之策

CFP 矛盾的美元 2010年,国际金融危机后的全球经济复苏之路并不平坦.围绕汇率问题,各国之间纷争.摩擦不断.一时间,有关"货币战"的言论甚嚣尘上,人民币汇率其间也承受较大升值压力. 冷静观察,人民币汇率问题的背后,其实潜藏着热钱冲击.资产泡沫.通胀预期.贸易保护主义等诸多困扰中国经济的问题.中国经济应如何应对? 国际"货币战"余波未了 人民币汇率依然面临考验 11月初,美联储又抛出总额达6000亿美元的第二轮定量宽松货币政策.政策甫出,美元大跌,市场担心全球流动

分析网站被搜索惩罚的原因、表现、及应对之策

相信无论是做seo的或者还是作站长的,都会经常遇到网站被搜索引擎降权甚至被K的情况.其实,这种情况很正常,甚至可以说"没有被降权(K)的站长不是好站长".可能有些朋友并不知道该如何来判断自己的网站是不是被降权了.今天就让我跟大家一起深度的探讨一下,网站为什么会被降权?降权的有哪些?降权后我们该如何来应对?现在就让我一一道来. 一.网站降权的4大表现 (1)在搜索引擎上site域名,主页不再第一位,甚至是在搜索结果中找不到.但这种情况并不是绝对的,要具体问题具体分析.如果网站是新站的话,

简说宽带商的弹窗广告进化及网站应对之策(DNS劫持进化论)

宽带商弹广告的后果: 1:以假乱真,误导不明真现的用户,以为是网站自身弹的广告. 2:用户烦.   早期宽带商弹广告,DNS劫持:   DNS是干什么用的? 就一个功能:根据域名的请求,返回IP,所以DNS本身不会返回广告. 宽带商利用DNS作恶,指向广告服务器: 虽然不能返回广告,但它可以返回假的IP,把IP指向自己的广告服务器,于是浏览器就把请求指向了宽带商的广告服务器.   宽带商的技术: 由于量大,宽带商不可能用广告服务器当代理服务器,去请求完数据再返回,所以有了最原始的一招:  弄个静

距 2038 只剩 21 年,开源软件社区正着手应对之策

距离 2038 年还有 21 年,这听起来似乎还有很长一段时间,但对于许多生命周期相对较长的嵌入式系统来说,现在部署的系统到该期限时仍然会投入使用,因此也该提前做好打算了. 2038 年问题是指使用 POSIX 时间的 32 位计算机应用程序,将在格林尼治时间 2038 年 1 月 19 日凌晨03:14:07(北京时间:2038 年 1 月 19 日中午 11:14:07)之后无法正常工作.因为它们的时间起点是格林尼治时间 1970 年 1 月 1 日 0 时 0 分 0 秒(这个时间名叫 t

物联网的冲击与应对之策

在"中国制造2025"被提升至国家战略高度的背景下,信息通信技术在经济转型升级发展.产业结构优化调整方面正发挥着前所未有的作用.在这样的背景下,无论是政府决策部门,还是企业的管理者,都亟需抓住新一轮科技革命和产业革命的重要机遇,加快战略部署和专项行动计划实施,推动技术和应用创新,释放物联网潜力,深化物联网应用,推动物联网的健康可持续发展. 一.全球化背景下的物联网产业发展 通过分析美.日.欧.韩物联网产业可以看出,全球物联网发展呈现出以下主要特征: 1.从地域格局看,在未来的十年里,发