其实&＃xff0c;在解决这个问题之前&＃xff0c;我更愿意让子搞清楚&＃xff0c;CSS里position不同属性之间的用法和含义&＃xff1a;

http://www.barelyfitz.com/screencast/html-training/css/positioning/

可以很好地解释这个问题。

 

今天遇到一件怪事情&＃xff0c;那就是position的属性和div的遮挡关系&＃xff0c;密切联系。这个对IE和&＃xff26;&＃xff26;都适用。

首先说明问题出现的地方&＃xff1a;

 

菜单下面的背景图把product的列表给遮住了&＃xff0c;这是肿么回事呢&＃xff1f;

看css对这个背景图的css&＃xff1a;

 

  1. .productDisplay{ 
  2. float:left; 
  3. clear:both; 
  4. height:100%; 
  5. width:100%; 
  6. position:relative;  //这个是问题所在
  7. background-color:transparent; 
  8. } 

 

分析&＃xff1a;原来是这个

position:relative; 

产生问题。

菜单的position属相是absolute&＃xff1b;属于动态定位中的绝对定位。

遮挡背景图relative是动态定位中的相对位置。而根据

同辈元素定位方式相同&＃xff0c;且无z-index设置时&＃xff0c;html靠后者居上。

所以靠后的div会遮挡住前面的。

解决方法&＃xff1a;

把菜单的z-index调节至999.然后可以解决遮挡问题。但是IE对z-index非常抗拒。

所以只能够把遮挡背景图的position&＃xff1a;relative去掉。