div层调整zindex属性无效原因分析及解决方法
在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置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> |
2 |
<</code> |
3 |
</</code> |
解决办法有三个(任一即可):
1、position:relative改为position:absolute;
2、浮动元素添加position属性(如relative,absolute等);
3、去除浮动。
2.第二种情况
IE6下,层级的表现有时候不是看子标签的z-index多高,而要看整个DOM tree(节点树)的第一个relative属性的父标签的层级。
eg:IE7与IE6有着同样的bug,原因很简单,虽然图片所在div当前的老爸层级很高(1000),但是由于老爸的老爸不顶用,可怜了9999如此强势的孩子没有出头之日啊!,代码如下:
1 |
<</code> |
2 |
<</code> |
3 |
<</code> |
4 |
</</code> |
5 |
</</code> |
解决办法: 在第一个relative属性加上一个更高的层级(z-index:1),代码如下:
1 |
<</code> |
2 |
<</code> |
3 |
<</code> |
4 |
</</code> |
5 |
</</code> |
div层调整zindex属性无效原因分析及解决方法的更多相关文章
- 【转载】div层调整zindex属性无效原因分析及解决方法
在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效.在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的pos ...
- 【Web前端】div层调整zindex属性无效原因分析及解决方法
在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效.在CSS中,只能通过代码改变层级,这个属性就是z- index,要让z-index起作用有个小小前提,就是元素的po ...
- 【FAQ】接入HMS Core推送服务,服务端下发消息常见错误码原因分析及解决方法
HMS Core推送服务支持开发者使用HTTPS协议接入Push服务端,可以从服务器发送下行消息给终端设备.这篇文章汇总了服务端下发消息最常见的6个错误码,并提供了原因分析和解决方法,有遇到类似问题的 ...
- Code:Blocks 中文乱码问题原因分析和解决方法
下面说说修改的地方. 1.修改源文件保存编码在:settings->Editor->gernal settings 看到右边的Encoding group Box了吗?如下图所示: Use ...
- MySQL This function has none of DETERMINISTIC, NO SQL...错误1418 的原因分析及解决方法
MySQL开启bin-log后,调用存储过程或者函数以及触发器时,会出现错误号为1418的错误: ERROR 1418 (HY000): This function has none of DETER ...
- c# 关于抓取网页源码后中文显示乱码的原因分析和解决方法
原因分析:首先,目前大多数网站为了提升网页浏览传输速率都会对网站内容在传输前进行压缩,最常用的是GZIP压缩解压解压算法,也是支持最广的一种. 因为网站传输时采用的是GZIP压缩传输,如果我们接受we ...
- 【FAQ】应用内支付服务无法拉起支付页面常见原因分析和解决方法
华为应用内支付服务(In-App Purchases)通过简便的接入流程为用户提供良好的应用内支付体验,然而在实际接入过程中,有一些开发者反馈测试时会无法正常拉起支付页面,下文将详细分析问题出现的5种 ...
- jquery submit ie6下失效的原因分析及解决方法
ie6中, $('a.btn').click(function(){ form.submit(); }) 点击失效: 分析: 微软低版本浏览器会先执行link标签的自身事件也就是href事件,这样就中 ...
- SSH 无法启动的原因分析及解决方法
简介 Secure Shell(缩写为 SSH),由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为一项创建在应用层和传输层基础上的安全协议,为计算机上的 S ...
随机推荐
- C#设计模式系列:工厂方法模式(Factory Method)
1. 工厂方法模式简介 1.1 定义 工厂方法模式定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法模式是以一个类的实例化延迟到其子类. Factory Method模式用于在不指定待创建 ...
- ExtJs4之Grid详细
ExtJs博客前奏 由于这段时间事情比较杂乱,博客就主要以项目中例子来说明编写. ExtJs4中的Grid非常强大,有展示,选中,搜索,排序,编辑,拖拽等基本功能,这篇博客我就这几个功能做写累述. 1 ...
- WPF 弹出UserControl
UserControl正常情况下是不能被弹出的,而编写好的UserControl页面,为了查看效果,又需要弹出. 为了解决这个问题,UserControl需要一个Windows来接收. var win ...
- python统计某一个进程名所占用的内存
设计思路: 通过python,执行cmd中tasklist命令,获取要统计的进程的相关信息:通过正则表达式,查找出进程名称.进程pid.内存使用,然后打印出来. 作为pythoner,有时候需要统计p ...
- 深入学习jQuery事件对象
× 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...
- C++中的内存管理
在C++中也是少不了对内存的管理,在C++中只要有new的地方,在写代码的时候都要想着delete. new分配的时堆内存,在函数结束的时候不会自动释放,如果不delete我分配的堆内存,则会造成内存 ...
- 关于ThinkPHP在BAE上URL的rewrite问题
在BAE上若想用ThinkPHP的那一套URL路由方式,必须在BAE上rewrite一下,之前我就直接用了不过是403错误,rewrite方式如下: 把你在BAE上的文件checkout到本地,在根目 ...
- ECharts使用心得
ECharts百度旗下图标插件,在展示地图.雷达图等方面有很好的支持. 应用场景: 自动生成X轴的数据: 设置:xAxis的type=value || type=time 并且设置series的dat ...
- 在Excel表里面插入背景图
工作中我们会经常用到MS Excel,通常我们打开MS Excel,里面的工作表都是空白单调的背景.当然了,MS Excel可以在工作簿里面插入背景图片.那么问题来了,如果你没有安装Microsoft ...
- ACM-东北大学程序设计竞赛-网络赛(2016.04.16)
Problem: A Time limit: 1s Mem limit: 64 MB AC/Submission: 0/0 Discuss Back Ranklist Stat ...