z-index离奇事件及应对之策
来源:互联网 发布:决战 秘笈进阶数据 编辑:程序博客网 时间:2024/05/16 07:18
扩展阅读: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>
0 0
- z-index离奇事件及应对之策
- 离奇事件
- css之z-index
- Flash开发之z-index
- css之z-index探讨
- z-index之深入理解
- 浅谈元素重叠及z-index问题
- z-index属性失效原因及解决办法
- [转]z-index的IE之旅
- CSS概念之分层z-index
- css z-index之object flash修正
- CSS学习笔记之<z-index属性>
- CSS之巧用z-index属性
- Z-index
- z-index
- z-index
- z-index
- z-index
- winsocket 解析本地IP ,为什么得到的不是一个IP
- Python copy a list
- 不相交集ADT
- UICollectionView
- Emacs常用命令记录at Mac
- z-index离奇事件及应对之策
- iOS多线程入门
- hdoj4047Pet【dfs】
- adb shell ,出错 提示error: device not found
- LInux 中的i386,i486,i586,i686和AMD_64,X86,x86_64后缀的区别
- 据说年薪30万的Android程序员必须知道的帖子
- 测试分析-场景分析法
- 阿里合伙人制度的意义及法律分析
- 使用navigator对象信息对浏览器进行判断