Dansion's 日志

最近在制作HTML页面,很多两列的地方需要一侧因定宽度,另一侧自适应宽度.当需要一个下拉菜单效果时,无论把z-index的值设为多高,菜单的DIV始终不在页面最顶层.
HTML

<div class="a">
a <div class="menu">sub a</div>
</div>
<div class="b">
b
</div>

CSS

.a {
position:relative;
background:#f00;
}
.menu{
position:absolute;
background:#0ff;
height:50px;
z-index:99;
}
.b {
position:relative;
background:#ff0;
}

以上是页面代码,menu的z-index已设为99,但在IE6,IE7中DIV[menu]始终在div的下面.只能通加设置div[a]的z-index的值来提升级div[menu]层叠高度,但在火狐中无需设置.可以看出IE对层叠顺序的继承性比火孤要严格的多.但本人觉火孤的方式接近设计者的意图.虽然对IE和火狐对CSS不同解析深恶痛绝,也只能感到无奈.

Tags: css, ie, z-index

This entry was posted on 星期一, 三月 3rd, 2008 at 23:34 and is filed under xhtml+css. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.