CSS z-index在ie67中不起作用
在chrome浏览器中可以看到这样的效果: 但是在ie67中看到的是:
这是z-index在ie浏览器中的一个兼容性问题:
一般来说z-index越大,层级越高,就会越在顶层显示,但是在ie67浏览器中会出现问题,
ie浏览器中会以他的顶级父元素作为参考点,不是以父元素作为参考,所以要在父元素中添加position:relative;z-index:1000(比被遮住的那一层高就行),这样在ie浏览器中就会正常显示了。
比如说:
<div style="position:relative;z-index:10">
<div>
<img style="position:absolute;z-index:10"/><!--此图片被下一个div遮住了,这是我们在第一个div中添加position:relative;z-index:10就可以解决问题-->
</div>
</div>
<div></div><!--这个div在ie浏览器中吧上面那个img遮住了-->
CSS z-index在ie67中不起作用的更多相关文章
- CSS系列:在HTML中引入CSS的方法
HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...
- css z-index属性使用过程中遇到的问题
z-index属性在web开发中会经常使用,其主要的作用简单的说就是把元素的position设置为absolute.fixed之后,可以调节元素在文档上的层级关系.比如经常见到的dialog,mask ...
- Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...
- css 实现页面加载中等待效果
<!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta ...
- css中的!important作用
css中的!important作用 一.总结 1.!important:是hack, 2.!important作用:让浏览器首选执行这个语句,当对同一个对象设置了多个同类型的属性的时候,首选执行这一个 ...
- js中getBoundingClientRect的作用及兼容方案
js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...
- Linq中关键字的作用及用法
Linq中关键字的作用及用法 1.All:确定序列中的所有元素是否都满足条件.如果源序列中的每个元素都通过指定谓词中的测试,或者序列为空,则为 true:否则为 false. Demo: 此示例使用 ...
- url中#号的作用
url中#号的作用就是本页面位置跳转 比如这个url地址:http://www.aaaaa.com/index.html?ad=34&m=c#red red就是index.html页面的依哥位 ...
- SQLSERVER中KeyHashValue的作用(下)
SQLSERVER中KeyHashValue的作用(下) 昨天中午跟高文佳童鞋讨论了KeyHashValue的作用,到最后还是没有讨论出结果 昨天晚上德国的兄弟傅文伟做了一下实验,将实验结果交给我 感 ...
随机推荐
- CloudStack 4.3功能前瞻
今天CloudStack 4.3已经Feature Freeze了,不会再有新功能加入到这个版本里.我们也可以坐下来看看哪些功能是值得期待的.首先,4.3的UI也秉承扁平化设计,看着更加简洁清爽.见下 ...
- Http面试题
http请求由三部分组成,分别是:请求行.消息报头.请求正文 HTTP(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连接方式,HTTP1.1版本中给出一种持续连接 ...
- es-多文档简单查询(_mget)
1.多文档查询 (1)url:POST http://localhost:9200/_mget?pretty/ 参数: { "docs": [{ "_index" ...
- thinkphp+memcache缓存例子
public function dailyRelays() { $history = I('post.history'); $da = new \Home\Model\DailyrelayModel( ...
- Grails项目开发——前端请求跨域问题
Grails项目开发--前端请求跨域问题 最近做项目采用前后端分离的思想,使用Grails作为后台开发Restful API供前端调用. 在项目开发的过程中,遇到前端没办法通过ajax访问到后台接口的 ...
- javascript高级程序设计读书笔记----事件
DOM0级事件处理程序 传统处理方式,即讲一个函数赋值给一个事件处理程序属性. DOM2级事件处理程序 addEventListener()和removeHandler()两个方法用于指定和删 ...
- [LeetCode 题解]: Remove Nth Node From End of List
Given a linked list, remove the nth node from the end of list and return its head. For example, Give ...
- BOLT.NET 学习笔记(一) 开篇 用.net winform 快速开发 炫酷的界面
BOLT.NET 学习笔记(一) 开篇 用.net winform 快速开发 炫酷的界面 bolt 基本介绍 Bolt界面引擎是迅雷公司从2009年开始开发的第四代界面库.迅雷7是首个采用该引擎成功开 ...
- layui后台框架的搭建
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从 ...
- SSL证书 .pem转.pfx
使用OpenSSL来进行转换 OpenSSL官网没有提供windows版本的安装包,可以选择其他开源平台提供的工具.例如 http://slproweb.com/products/Win32OpenS ...