z-index失效情况
来源:互联网 发布:电脑扩音器软件 话筒 编辑:程序博客网 时间:2024/04/30 15:35
在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的position属性要是relative,absolute或是fixed。
第一种情况(z-index无论设置多高都不起作用情况):
这种情况发生的条件有三个:
1、父标签 position属性为relative;
2、问题标签无position属性(不包括static);
3、问题标签含有浮动(float)属性。
eg:z-index层级不起作用,浮动会让z-index失效,代码如下:
<div style="position: relative; z-index: 9999"> <img style="float: left" src="pic.jpg"></div>
解决办法有三个(任一即可):
1、position:relative改为position:absolute;
2、浮动元素添加position属性(如relative,absolute等);
3、去除浮动。
第二种情况
IE6下,层级的表现有时候不是看子标签的z-index多高,而要看整个DOM tree(节点树)的第一个relative属性的父标签的层级。
eg:IE7与IE6有着同样的bug,原因很简单,虽然图片所在div当前的老爸层级很高(1000),但是由于老爸的老爸不顶用,可怜了9999如此强势的孩子没有出头之日啊!代码如下:
<div style="position: relative”> <div style="position: relative; z-index: 1000″> <div style="position: absolute; z-index: 9999″> <img src="pic.jpg"> </div> </div></div>
解决办法: 在第一个relative属性加上一个更高的层级(z-index:1),代码如下:
<div style="position: relative; z-index: 1″> <div style="position: relative; z-index: 1000″> <div style="position: absolute; z-index: 9999″> <img src="pic.jpg"> </div> </div></div>
0 0
- z-index失效情况
- z-index失效原因
- z-index失效!!!!
- z-index失效
- ie7 z-index 失效问题
- css z-index失效问题
- IE6中z-index失效
- z-index失效问题解析
- 解决IE,z-index失效
- 在IE6下z-index失效
- IE系列下z-index失效问题
- position:relative/absolute/IE6/z-index失效
- IE系列下z-index失效问题
- IE Z-INDEX无效失效的解决
- 我的z-index怎么“失效”了?
- z-index属性失效原因及解决办法
- easyui-window的z-index失效
- z-index无论设置多高都不起作用情况
- 【Android】灵云在线语义理解功能使用说明
- <转>深入理解Spark RDD抽象模型和编写RDD函数
- Kali-linux-2016.2安装后常用配置记录(1)
- Android蓝牙4.0开发
- MTD/MT/MDD/MD以及LIB/DLL之间的一些联系和问题
- z-index失效情况
- 数据从关系型数据库到大数据平台再到关系型数据库
- NFC初步开发详解
- 蓝鸥React Native零基础入门到项目实战 props
- 认识iOS Application Extension(应用扩展)
- jenkins邮件通知的配置
- Spring、Spring MVC、MyBatis整合文件配置详解
- php 微信授权登录 40029错误
- T4模板生成器案例