IE7中肯定精准定位元素之间的遮住难题示例讨论

日期:2020-12-12 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

本人较为适用IE9以上的版本号,觉得她们的款式和实际效果全是较为人的本性化的,但是许多情况下還是迫不得已考虑到别的版本号访问器的体会,这里IE6就无需考虑到他了,这货真是便是IT史上的奇葩,这里要说1个IE7的肯定精准定位和相对性精准定位后,出現元素遮挡的难题。

难题在这里:

因为网页页面繁杂就不上实际事例,举例表明。

两个同等级<div>元素,都设定了 position: relative;相对性精准定位。

她们的內部的元素(无论甚么元素了)都设定了position: absolute;

而第1个<div>元素中的元素必须划过显示信息实际效果,要遮挡正下方的<div>,可在这个情况下,刚好相反,竟然被后者遮住了(正下方的<div>很不心服口服,有没有)。

这里我必须截图演试:


这里有两个部落:1个鲜红色框里边套着1个黄色板块 这里大家叫它小A

1个蓝色框里边套着1个翠绿色板块 这里大家叫它小C(由于小B不太好听,大家就不叫了)

最先说1下,小A的鲜红色框和小C的蓝色框全是相对性精准定位(position: relative;),而小A的黄色板块和小C的绿的板块全是肯定精准定位(position: absolute),这里说下两个板块的肯定精准定位全是相对自身的父元素而言的,不上解的同学能够去补习下CSS。
我在这里要完成甚么实际效果呢:便是电脑鼠标移到黄色的板块,随后他不抗孤单的变长,随后遮盖下面的小C。

实际效果看下图:


这才是我要的实际效果,但是IE7恰恰很2货的逆天了,大伙儿看看他甚么实际效果:



真是狂拽酷炫屌炸天啊。

一些同学毫无疑问说了,设定1下等级关联好了。这个方法十分好,可是给谁设定呢?许多同学和我1样最先给黄色板块设定了z-index:999;

你们能够试1下,针对这个2货IE7来说,真是让人发指,他恰恰不这么做。

(不说多了,要不然大伙儿说我在这逗比了,我并不是小猴子派来逗比的。)

说1下正确的处理方法:

这里设定绝地精准定位的元素是沒有用的,应当设定两个相对性精准定位的元素,也便是小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⑻" />
<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>