position(relative)とdivの重複または遮蔽問題

実は、この問題を解決する前に、CSSのpositionの異なる属性の間の使い方と意味を明らかにしたいと思っています.
http://www.barelyfitz.com/screencast/html-training/css/positioning/
この問題をうまく説明できる.
 
今日、positionの属性とdivの遮蔽関係が密接に関連しているという奇妙なことに遭遇しました.これはIEにもFFにも適用されます.
まず、問題が発生した場所を説明します.
 
メニューの下の背景図がproductのリストを隠していますが、これは腫れていますか?
cssのこの背景図に対するcssを見てください.
 

 
    
 
     
.productDisplay{ 
 
     
float:left; 
 
     
clear:both; 
 
     
height:100%; 
 
     
width:100%; 
 
     
position:relative;  //这个是问题所在
 
     
background-color:transparent; 
 
     
} 
 
    
 
    
 
 
    
分析：原来是这个
 
    
position:relative;  
  
問題が生ずる.
メニューのposition属相はabsoluteです.動的位置決めに属する絶対位置決め.
遮蔽バックグラウンドマップrelativeは、動的位置決めにおける相対位置である.によって
同世代の要素の位置決め方式が同じで、z-index設定がない場合、htmlは後者が上位になります.
だから後ろのdivは前を遮る.
解決方法:
メニューのz-indexを999に調整します.その後、遮蔽の問題を解決できます.しかしIEはz-indexに対して非常に抵抗している.
したがって,遮蔽背景図のposition:relativeのみを取り除くことができる.
  
  
  
  
  
  
  
  
  
  
  
転載先:https://blog.51cto.com/6221123/1102091