position:absolute小问题困扰了一下午

    近日，一个项目的首页顶部图片需要适应多个分辨率，如果用一个图片，图片就会被横向拉伸，效果很不好看。所以只好将整个图片拆分为四部分，左侧固定图片、右侧固定图片、中间平滑过渡图片、标题图片（透明）。
     首先，将中间平滑过渡图片放置于body的背景图片，且将其background-repeat设为repeat-x;代码如下：

body{
	background-image: url(../image/banner-middle.gif);
	background-repeat: repeat-x;
	min-width: 970px;
}

    然后，将左侧固定图片、右侧固定图片、标题图片分别放置于div中，并设置相关属性，代码如下：

<div id="leftImg"></div >
<div id="rightImg"></div >
<div id="titleImg"></div>

#leftImg{
	width: 531px;
	height: 99px;
	float: left;
	background-image: url(../image/banner-left.jpg);
}
#titleImg{
	width: 423px;
	height: 32px;
	position: absolute;
	left: 400px;
	top: 20px;
	background-repeat:no-repeat;
	background-image: url(../image/banner-title.gif);
	direction: inherit;
	visibility: visible;
}
#rightImg{
	width: 436px;
	height: 99px;
	float: right;
	background-image: url(../image/banner-right.jpg);
}

    结果，问题来了，发现在FF下一切显示正常，而在IE6下，标题图片无论如何都显示不出来，经过调试，发现是被其他俩个div给覆盖了。最后通过给左侧及右侧图片均指定position:absolute，才将问题解决。
     在#leftImg中添加属性

position: absolute;
	left:0px;

    在#rightImg中添加属性

position: absolute;
	right:0px;