逆天的IE7中,绝对定位元素之间的遮盖问题
个人比较支持IE9以上的版本,认为他们的样式和效果都是比较人性化的,不过很多时候还是不得不考虑其他版本浏览器的感受,这里IE6就不用考虑他了,这货简直就是IT史上的奇葩,这里要说一个IE7的绝对定位和相对定位后,出现元素遮挡的问题。
问题在这里:
由于页面复杂就不上现实例子,举例说明。
两个同层级<div>元素,都设置了 position: relative;相对定位。
他们的内部的元素(不管什么元素了)都设置了position: absolute;
而第一个<div>元素中的元素需要划过显示效果,要遮挡下方的<div>,可在这个时候,恰恰相反,居然被后者遮盖了(下方的<div>很不服气,有木有)。
这里我需要截图演示:
这里有两个部落:一个红色框里面套着一个黄色板块 这里我们叫它小A
一个蓝色框里面套着一个绿色板块 这里我们叫它小C(因为小B不好听,我们就不叫了)
首先说一下,小A的红色框和小C的蓝色框都是相对定位(position: relative;),而小A的黄色板块和小C的绿的板块都是绝对定位(position: absolute),这里说下两个板块的绝对定位都是相对于自己的父元素而言的,不了解的同学可以去补习下CSS。
我在这里要实现什么效果呢:就是鼠标移到黄色的板块,然后他不耐寂寞的变长,然后覆盖下面的小C。
效果看下图:
这才是我要的效果,可是IE7偏偏很二货的逆天了,大家看看他什么效果:
简直狂拽炫酷屌炸天啊。
有些同学肯定说了,设置一下层级关系好了。这个办法非常好,但是给谁设置呢?很多同学和我一样首先给黄色板块设置了z-index:999;
你们可以试一下,对于这个二货IE7来讲,简直令人发指,他偏偏不这么做。
(不说多了,不然大家说我在这逗比了,我不是猴子派来逗比的。)
说一下正确的解决办法:
这里设置绝地定位的元素是没有用的,应该设置两个相对定位的元素,也就是小A的红色框框,和小C的蓝色框框,设置他们的层级关系。给小A的红色框框设置z-index:999;(数值只要够大即可)。
给小C的蓝色框框设置z-index:0;(比小A的小就行)。然后我们期望的效果就出现了。哈哈哈
当然不设置的话 IE7以上版本都不会有这问题哦。
下面是我的代码,你们阔以去试验下吧
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.div1 {width: 300px;height: 80px;border: 3px solid red;position: relative;z-index:999;}
.div11 {width: 200px;height: 60px;position: absolute;left: 50px;top: 10px;background: orange;}
.div11:hover {height: 300px;} .div2 {margin-top: 10px;width: 300px;height: 80px;border: 3px solid blue;position: relative;}
.div21 {width: 280px;height: 60px;position: absolute;left: 10px;top: 10px;background: green;}
</style>
</head>
<body>
<div class="div1">
<div class="div11"></div>
</div>
<div class="div2">
<div class="div21"></div>
</div>
</body>
</html>
为本人原创,在此发表。
如有问题可以与本人联系
邹学良 Terry Zou
QQ:1526348043
新浪微博:http://weibo.com/coolsbook
更多关注请访问http://www.coolsbook.com
原文地址:http://www.coolsbook.com/Post?id=158
逆天的IE7中,绝对定位元素之间的遮盖问题的更多相关文章
- IE7中绝对定位元素之间的遮盖问题
由于页面复杂就不上现实例子,举例说明. 两个同层级<div>元素,都设置了 position: relative;相对定位. 他们的内部的元素(不管什么元素了)都设置了position: ...
- ie7兼容性 绝对定位元素之间的遮盖问题
今天在调试ie7兼容性问题的时候,遇到了一个棘手的问题,解决了一天无果,晚上看到一位大神写的心得,最终解决. 网址:http://www.jb51.net/css/148606.html#commen ...
- 5种方法去掉HTML中Inline-Block元素之间的空白
5种方法去掉HTML中Inline-Block元素之间的空白 记得年轻时我在IE6上开发,绝望的希望IE6能支持display: inline-block功能.当需要在”inline”元素上控制mar ...
- 转: Firefox 浏览器对 TABLE 中绝对定位元素包含块的判定有错误
标准参考 元素的包含块 W3C CSS2.1 规范中规定,绝对定位元素的包含块(containing block),由离它最近的 position 特性值是 "absolute". ...
- 逆天的IE7中,诡异的横向滚动条
今天老邹我又要吐槽IE7了,这个奇葩浏览器总是不让省心.这回遇到的问题,灰常难发现是怎么回事,不过还是让我发现原因,哈哈,只要原因去干掉这个问题比躲避问题用别的办法绕开要爽的多啊. 首先我还是介绍下, ...
- table中绝对定位元素相对td定位失效解决方案
开门见山! 问题:在一个table中,我需要在td里面绝对定位一个div, 写法:td{position:relative;} div{position:absolute;} OK,就这么简单,思路也 ...
- Vue中data元素之间相互赋值的陷阱
今天在整理代码时,遇到这样的一个场景,下面将结合示例说明: (一)在Vue文件中定义一个const常量,如下图所示: (二)在data中有三个元素是这样赋值的,如下图所示: (三)在created() ...
- HTML表格中各元素之间属性之间的相互影响
开发了一个动态表格制作程序,用的是谷歌浏览器.发现几个现象,记录如下: 1.按照技术文档的说法,正规的表格样式如下: <table> <caption>标题</capti ...
- HTML和CSS在IE7中常见的兼容性问题
IE7及以下版本都会有这些问题 1.IE7块转内联块问题 问题描述:好像块转内联块失败,依然不在一行排列 解决办法:给元素添加如下css *display:inline;*zoom:1; *di ...
随机推荐
- Keil增量编译build异常
装完MDK4.6/4.7a,发现没有修改源文件的情况下,单击build,每次都是重新编译,之前测试过重新建立工程/装回4.22,解决了该问题,当时并没多想原因.这次又出现了这个问题,重装了很久,也都这 ...
- 所有语言的Awesome
Awesome Awesomeness A curated list of amazingly awesome awesomeness. Also available on: Awesome-Awes ...
- 修改一行和修改全表的TX锁
SQL> select * from v$mystat where rownum<2; SID STATISTIC# VALUE ---------- ---------- ------- ...
- gnome/KDE安装,gnome出现问题,重新安装nvdia驱动
重新安装显示gtx745驱动NVIDIA-Linux-x86_64-346.59.run, yum groupremove kde-desktop yum groupinstall "Des ...
- -_-#【userAgent】极速模式与非极速模式存在差异
UC浏览器 Android 极速模式 UC浏览器 Android 非极速模式
- 一个ASPX页面的生命周期?
大家都知道客户端请求一个ASPX页面,通过iis中接收,会被的interinfo.exe进程截取,判断其扩展名,再把请求转交给ASPNET_ISAPI.DLL,通过isapi扩展进入相应的管道处理,转 ...
- 用SQL求1到N的质数和
今天在百度知道中,遇到了一位朋友求助:利用sql求1到1000的质数和.再说今天周五下午比较悠闲,我就在MSSQL 2008中写了出来,现在分享在博客中,下面直接贴代码: declare @num i ...
- 用Visual Studio创建gtest动态链接库工程
Step1 创建名为gtest的Win32 Project Step2 在Application Settings中的Application type下选择DLL Step3 把gtest-all.c ...
- HDU_1874——最短路问题,Dijkstra算法模版
Problem Description 某省自从实行了很多年的畅通工程计划后,终于修建了很多路.不过路多了也不好,每次要从一个城镇到另一个城镇时,都有许多种道路方案可以选择,而某些方案要比另一些方案行 ...
- HDU 4604 Deque 最长子序列
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4604 Deque Time Limit: 4000/2000 MS (Java/Others) ...