Go语言视频零基础入门到精通

一度

出现的浏览器：IE6 IE7（在firefox中正常没问题）

问题现象：div的内容（包括文字，图片，表单等）和背景分离开了看起来像在两个不同的层里面一样。

本来是为了实现一个可变背景的页面，让页面的背景颜色和透明度可变(即下面代码中的div#main)，但是内容的颜色和透明度不随背景变而变（即div#content），于是需要在内容层的下面加一个z-index比它低的层（div#background）来做背景。

为了让div#background做div#main的背景，需要让div#background的位置和div#main的位置自动对齐，于是就需要用css的position来对齐它们的位置。让div#background的坐标是main的left:0,top:0的位置上。但是这样之后，div#content的背景看起来就和内容分离开了，看起来像是分别在两个不同的层里面，而div#background就处在这两个层之间，把它们分离开了。

看看下面的代码运行效果：



<div id="main">   
<div id="background"></div>   
<div id="content" style="backgroundrange;">这个层的内容和background跑分离了(对比IE6和firefox效果能明显看到)。</div>   
</div>   
  
<style type="text/css">   
#main{position:relative;z-index:1;}   
#background{position:absolute;left:31px;top:0;z-index:-1;width:100%;background:red;height:60px;}   
</style>


解决办法：给内容和背景分离的div 即div#content加上一个明确的高度，或者是宽度，比如:width:100%;height:100%; 在下面的代码中就会得到IE6 IE7 firefox中都正确的结果：



<div id="main">   
<div id="background"></div>   
<div id="content" style="background:orange;width:100%">这个层的内容和background跑分离了(对比IE6和firefox效果能明显看到)</div>   
</div> `  
  
<style type="text/css">   
#main{position:relative;z-index:1;}   
#background{position:absolute;left:31px;top:0;z-index:-1;width:100%;background:red;height:60px;}   
</style>








<div id="main">
    <div id="background"></div>
    <div id="content" style="background:orange;width:100%">这个层的内容和background跑分离了 这里的文字都是属于背景颜色是orange的那个div的；红色背景的div是id=background的层。</div>
</div>

<style type="text/css">
#main{position:relative;z-index:1;}
#background{position:absolute;left:31px;top:0;z-index:-1;width:100%;background:red;height:60px;}
</style>