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月前
|
机器学习/深度学习 存储 人工智能
Attention优化重大突破!显存减半效率倍增
本文探讨了Transformer中Attention机制的演变与优化。从2017年Transformer提出以来,各种改进如MQA、GQA、MLA等层出不穷,旨在降低计算复杂度和显存消耗,同时保持模型性能。文章首先介绍了Attention的基本原理,通过QKV矩阵运算实现序列建模。接着分析了优化方法:kv caching将计算复杂度从O(n^3)降至O(n^2),但带来显存压力;MQA、GQA等通过减少或压缩K/V降低显存需求;而NSV、MoBA等稀疏化研究进一步缓解长序列下的计算与存储负担,推动大模型向更长上下文扩展。
|
算法 大数据 数据挖掘
数据脱敏技术
【4月更文挑战第24天】数据脱敏可以划分为静态数据脱敏(Static Data Masking, SDM)和动态数据脱敏(Dynamic Data Masking, DDM)技术。
|
机器学习/深度学习 算法
【MATLAB】 多元变分模态分解MVMD信号分解算法
【MATLAB】 多元变分模态分解MVMD信号分解算法
1401 0
|
存储 Oracle Cloud Native
科技云报道:2022Arm服务器现状:云阵营已成
为什么看好Arm在数据中心市场的发展前景?
699 0
科技云报道:2022Arm服务器现状:云阵营已成
|
2天前
|
存储 弹性计算 人工智能
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
2025年9月24日,阿里云弹性计算团队多位产品、技术专家及服务器团队技术专家共同在【2025云栖大会】现场带来了《通用计算产品发布与行业实践》的专场论坛,本论坛聚焦弹性计算多款通用算力产品发布。同时,ECS云服务器安全能力、资源售卖模式、计算AI助手等用户体验关键环节也宣布升级,让用云更简单、更智能。海尔三翼鸟云服务负责人刘建锋先生作为特邀嘉宾,莅临现场分享了关于阿里云ECS g9i推动AIoT平台的场景落地实践。
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
|
4天前
|
云安全 数据采集 人工智能
古茗联名引爆全网,阿里云三层防护助力对抗黑产
阿里云三层校验+风险识别,为古茗每一杯奶茶保驾护航!
古茗联名引爆全网,阿里云三层防护助力对抗黑产
|
4天前
|
存储 机器学习/深度学习 人工智能
大模型微调技术:LoRA原理与实践
本文深入解析大语言模型微调中的关键技术——低秩自适应(LoRA)。通过分析全参数微调的计算瓶颈,详细阐述LoRA的数学原理、实现机制和优势特点。文章包含完整的PyTorch实现代码、性能对比实验以及实际应用场景,为开发者提供高效微调大模型的实践指南。
534 2
kde
|
4天前
|
人工智能 关系型数据库 PostgreSQL
n8n Docker 部署手册
n8n是一款开源工作流自动化平台,支持低代码与可编程模式,集成400+服务节点,原生支持AI与API连接,可自托管部署,助力团队构建安全高效的自动化流程。
kde
362 3