61,112
社区成员
发帖
与我相关
我的任务
分享IE在处理position:relative时的一个Bug
下面这段代码有两个相对定位的Div（Div1,Div2），在Div1中放置了Div1_1并设置为绝对定位，bottom设为-20
在火狐中Div1_1超出部分会显示在Div2的上面（预期也是这个结果），但在IE中包括IE7里，Div1_1会被Div2遮住。
请各位老大帮帮忙，看看能不能解决这个IE的bug,谢谢
在火狐中Div1_1超出部分会显示在Div2的上面（预期也是这个结果），但在IE中包括IE7里，Div1_1会被Div2遮住。
请各位老大帮帮忙，看看能不能解决这个IE的bug,谢谢
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
<!--
#Div1 {
background-color:#FFFF99;
height: 100px;
width: 400px;
position: relative;
}
#Div1 #Div1_1{
position:absolute;
right:0px;
bottom:-20px;
height:50px;
width:200px;
background:#FF6633;
z-index:1000;
}
#Div2{
position:relative;
background:#99FF33;
height:100px;
width:400px;
}
-->
</style>
</head>
<body>
<div id="Div1">
<div id="Div1_1"></div>
</div>
<div id="Div2">
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
alicar 2009-03-12
- 打赏
- 举报
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
<!--
#Div1 {
background-color:#FFFF99;
height: 100px;
width: 400px;
position: relative;
z-index:5;/*级别设成大于Div2的级别*/
}
#Div1 #Div1_1{
position:absolute;
right:0px;
bottom:-20px;
height:50px;
width:200px;
background:#FF6633;
z-index:1000;
}
#Div2{
position:relative;
background:#99FF33;
height:100px;
width:400px;
}
-->
</style>
</head>
<body>
<div id="Div1">
<div id="Div1_1"></div>
</div>
<div id="Div2">
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
<!--
#Div1 {
background-color:#FFFF99;
height: 100px;
width: 400px;
position: relative;
z-index:5;/*级别设成大于Div2的级别*/
}
#Div1 #Div1_1{
position:absolute;
right:0px;
bottom:-20px;
height:50px;
width:200px;
background:#FF6633;
z-index:1000;
}
#Div2{
position:relative;
background:#99FF33;
height:100px;
width:400px;
}
-->
</style>
</head>
<body>
<div id="Div1">
<div id="Div1_1"></div>
</div>
<div id="Div2">
</div>
</body>
</html>
alicar 2009-03-12
- 打赏
- 举报
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
<!--
#Div1 {
background-color:#FFFF99;
height: 100px;
width: 400px;
position: relative;
z-index:5;
}
#Div1 #Div1_1{
position:absolute;
right:0px;
bottom:-20px;
height:50px;
width:200px;
background:#FF6633;
z-index:1000;
}
#Div2{
position:relative;
background:#99FF33;
height:100px;
width:400px;
}
-->
</style>
</head>
<body>
<div id="Div1">
<div id="Div1_1"></div>
</div>
<div id="Div2">
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
<!--
#Div1 {
background-color:#FFFF99;
height: 100px;
width: 400px;
position: relative;
z-index:5;
}
#Div1 #Div1_1{
position:absolute;
right:0px;
bottom:-20px;
height:50px;
width:200px;
background:#FF6633;
z-index:1000;
}
#Div2{
position:relative;
background:#99FF33;
height:100px;
width:400px;
}
-->
</style>
</head>
<body>
<div id="Div1">
<div id="Div1_1"></div>
</div>
<div id="Div2">
</div>
</body>
</html>
felyxiu 2009-02-23
- 打赏
- 举报
哈哈O(∩_∩)O~，在IE7解决问题了，ie6还没测
把Div1的Z-index设得比Div2高就可以了，
可以有一点没想通，为什么非绝对定位也可以用Z-index
把Div1的Z-index设得比Div2高就可以了，
可以有一点没想通，为什么非绝对定位也可以用Z-index
felyxiu 2009-02-23
- 打赏
- 举报
bhbhxy的做法确实可以把遮住的部分显示出来，但是Div_2确实需要他是Relative的。因为在我的项目里Div_2里还有绝对定位的元素。
另外两位的方法我也试了，好像还是不行。
另外两位的方法我也试了，好像还是不行。
jiangjay818 2009-02-23
- 打赏
- 举报
这是一个关于安全嵌套的问题。
<div id="Div1">
<span id="Div1_1"></span>
</div>
<div id="Div2">
</div>
万事OK
<div id="Div1">
<span id="Div1_1"></span>
</div>
<div id="Div2">
</div>
万事OK
mike_24 2009-02-23
- 打赏
- 举报
Div1_1是相对定位,是相对Div1.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
<!--
#Div1 {
background-color:#FFFF99;
height: 100px;
width: 400px;
position: relative;
}
#Div1 #Div1_1{
position:absolute;
right:0px;
bottom:-20px;
height:50px;
width:200px;
background:#FF6633;
z-index:1000;
}
#Div2{
position:relative;
background:#99FF33;
height:100px;
width:400px;
*z-index:0;
}
-->
</style>
</head>
<body>
<div id="Div1">
<div id="Div1_1"></div>
</div>
<div id="Div2">
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
<!--
#Div1 {
background-color:#FFFF99;
height: 100px;
width: 400px;
position: relative;
}
#Div1 #Div1_1{
position:absolute;
right:0px;
bottom:-20px;
height:50px;
width:200px;
background:#FF6633;
z-index:1000;
}
#Div2{
position:relative;
background:#99FF33;
height:100px;
width:400px;
*z-index:0;
}
-->
</style>
</head>
<body>
<div id="Div1">
<div id="Div1_1"></div>
</div>
<div id="Div2">
</div>
</body>
</html>
bhbhxy 2009-02-23
- 打赏
- 举报
#Div1 {
background-color:#FFFF99;
height: 100px;
width: 400px;
position: relative;
}
#Div1 #Div1_1{
position:absolute;
right:0px;
bottom:-20px;
height:50px;
width:200px;
background:#FF6633;
z-index:1000;
}
#Div2{
background:#99FF33;
height:100px;
width:400px;
}
-->
</style>
</head>
<body>
<div id="Div1">
<div id="Div1_1"></div>
</div>
<div id="Div2">
</div>
</body>
</html>
你自己用错了吧，这不是IE的BUG
