61,126
社区成员
发帖
与我相关
我的任务
分享div relative z-index的问题
我的预期是这样的一个Div内有两个子Div,一个子Div内有一Flash，另一个作为透明遮罩把Falsh全部盖住
现在的问题是如果我不使用margin-top:-300px;则Flash所在的那个Div永远被遮罩层挤到下面了，虽然他们
的Z-index是不一样的。按理说他们不在同一层啊，为什么会这样?
DOCTYPE 定义:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Css 设置:
<style type="text/css">
.cover{
width:500px;
height:300px;
position:relative;
left:0;
top:0;
z-index:2;
cursor:pointer;
background-color:#FFFFFF;
opacity:0;
filter:Alpha(Opacity="0");
border:1px solid green;
}
.chartC{
width:500px;
height:300px;
position:relative;
left:0;
top:0;
margin-top:-300px;/*如果这行注释掉就得不到预期的效果*/
z-index:1;
border:1px solid red;
}
</style>
Div设置：
<div style="position:relative;">
<div class="cover"></div>
<div id="divChart" class="chartC"></div>
</div>
现在的问题是如果我不使用margin-top:-300px;则Flash所在的那个Div永远被遮罩层挤到下面了，虽然他们
的Z-index是不一样的。按理说他们不在同一层啊，为什么会这样?
DOCTYPE 定义:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Css 设置:
<style type="text/css">
.cover{
width:500px;
height:300px;
position:relative;
left:0;
top:0;
z-index:2;
cursor:pointer;
background-color:#FFFFFF;
opacity:0;
filter:Alpha(Opacity="0");
border:1px solid green;
}
.chartC{
width:500px;
height:300px;
position:relative;
left:0;
top:0;
margin-top:-300px;/*如果这行注释掉就得不到预期的效果*/
z-index:1;
border:1px solid red;
}
</style>
Div设置：
<div style="position:relative;">
<div class="cover"></div>
<div id="divChart" class="chartC"></div>
</div>
...全文
请发表友善的回复…
发表回复
Cyril_Tam 2009-09-10
- 打赏
- 举报
谢谢啊~~
xingqiliudehuanghun 2009-09-10
- 打赏
- 举报
回去查了下苏昊的CSS手册，现在明白了。楼上的说的是不对的.使用相对定位left、top、right、bottom依然
起作用，只是他们的作用这时是将元素在static模式下确定的位置的基础上进行偏移。在相对定位下z-index不
再起作用，其堆叠顺序有元素的出现顺序决定，后出现的在上
起作用，只是他们的作用这时是将元素在static模式下确定的位置的基础上进行偏移。在相对定位下z-index不
再起作用，其堆叠顺序有元素的出现顺序决定，后出现的在上
xingqiliudehuanghun 2009-09-10
- 打赏
- 举报
还是错了z-index在relative、absolute定位时都起作用
Cyril_Tam 2009-09-09
- 打赏
- 举报
position:relative;是相对定位,即使你设了left:0;top:0;是不起作用的.
margin-top:-300px;你加这上句,只是硬把它抽上去.
既然你都用了left:0;top:0;那能不能用绝对定位?
.chartC{
width:500px;
height:300px;
position:absolute;
left:0;
top:0;
z-index:1;
border:1px solid red;
}
如果我的理解有误,请纠正.
margin-top:-300px;你加这上句,只是硬把它抽上去.
既然你都用了left:0;top:0;那能不能用绝对定位?
.chartC{
width:500px;
height:300px;
position:absolute;
left:0;
top:0;
z-index:1;
border:1px solid red;
}
如果我的理解有误,请纠正.
xingqiliudehuanghun 2009-09-09
- 打赏
- 举报
我的预期是这样的一个Div内有两个子Div,一个子Div内有一Flash，另一个作为透明遮罩把Falsh全部盖住
现在的问题是如果我不使用margin-top:-300px;则Flash所在的那个Div永远被遮罩层挤到下面了，虽然他们
的Z-index是不一样的。按理说他们不在同一层啊，为什么会这样?
DOCTYPE 定义:
Css 设置:
Div设置：
现在的问题是如果我不使用margin-top:-300px;则Flash所在的那个Div永远被遮罩层挤到下面了，虽然他们
的Z-index是不一样的。按理说他们不在同一层啊，为什么会这样?
DOCTYPE 定义:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Css 设置:
<style type="text/css">
.cover{
width:500px;
height:300px;
position:relative;
left:0;
top:0;
z-index:2;
cursor:pointer;
background-color:#FFFFFF;
opacity:0;
filter:Alpha(Opacity="0");
border:1px solid green;
}
.chartC{
width:500px;
height:300px;
position:relative;
left:0;
top:0;
margin-top:-300px;/*如果这行注释掉就得不到预期的效果*/
z-index:1;
border:1px solid red;
}
</style>Div设置：
<div style="position:relative;">
<div class="cover"></div>
<div id="divChart" class="chartC"></div>
</div>
