个人比较支持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>
问题在这里：
由于页面复杂就不上现实例子，举例说明。
两个同层级<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>
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2024年09月22日
2024年09月22日
- 没有才能.2024-我终于也变成人了【华研国际】【FLAC分轨】
- 张国荣.1995-宠爱（2014年K2HD限量版）【滚石】【WAV+CUE】
- 林姗.2009-个人精选集【芮河】【WAV+CUE】
- 魔兽世界地心之战织雾武僧用什么饰品 地心之战织雾武僧饰品推荐
- 瑞鸣《喜马拉雅》[WAV+CUE]
- 【古典音乐】郑京和《华纳录音全集》11CD.2015[FLAC+CUE]
- 群星《经典再现·国语男声》2CD[DTS-WAV]
- 打完猴了！来聊聊你最喜欢哪段故事！
- 玩家分享《黑神话：悟空》大怨种：想痛快玩游戏花了快400块
- 作者回应《黑神话》墙绘被毁：当地相关部门支持重绘
- 李泉.1995-上海梦【魔岩】【WAV+CUE】
- 何雨雯.1994-给你的歌【天王唱片】【WAV+CUE】
- 群星.1994-神摇第一章·极乐扬州路【D.I.Y】【WAV+CUE】
- 《车烧友 发烧情歌天碟3CD》[WAV/分轨][1.9GB]
- 《薛之谦 情歌不变招牌 霸气情歌2CD》[WAV/分轨][1.2GB]