イメージにテキストを配置する問題が発生する（CSS、相対的な位置付け）

Question

私は画像メニュー（4枚の写真のブロック）を持っています、これらの写真の上に何かのテキストを表示したいです。私は前にそれをやったことがあるが、何らかの理由で今度はすべての梨の形をしている。私はそれらをコンテンツとみなし、マークアップでそれらを望むので、CSS内の背景として画像を設定したくありません。

#club_menu{ 
position:relative; 
padding:1px; 
width:99.5%; 
height:400px; 
/*border: 1px solid #A424A9;*/ 
} 
#club_menu a{ 
position:relative; 
width:295px;  
} 
#club_menu a h2{ 
position:absolute; 
top:100px; 
left:0; 
width:100%; 
} 
#club_menu h2 span{ 
color:white; 
font:bold 24px/45px Helvetica, sans-serif; 
letter-spacing:-1px; 
background-color:#A424A9; 
filter:alpha(opacity=70); 
opacity:0.7; 
padding:10px; 
} 

とHTML：：

<div id="club_menu"> 
      <a href="#"> 
      <h2><span>Aquum Tuesday</span></h2> 
      <img src="<?php bloginfo('template_directory'); ?>/images/menu_aquum.jpg" width="295" height="195" /> 
      </a> 
      <a href="#"> 
      <h2><span>Movida Wednesday</span></h2> 
      <img src="<?php bloginfo('template_directory'); ?>/images/menu_movida.jpg" width="295" height="195" /> 
      </a> 
      <a href="#"> 
      <h2><span>Whisky Thursday</span></h2> 
      <img src="<?php bloginfo('template_directory'); ?>/images/menu_whisky.jpg" width="295" height="195" /> 
      </a> 
      <a href="#"> 
      <h2><span>Jalouse Tuesday</span></h2> 
      <img src="<?php bloginfo('template_directory'); ?>/images/menu_jalouse.jpg" width="295" height="195" /> 
      </a> 
      </div> 

を私は今、1時間以上遊んでてきたとラベルがあらゆる場所に簡単にしているここ

私が行っているCSSがあります。私のイメージは完全に正しい場所にあります。誰かがCSSを使っていくつかのスキルを教えてください、私を教えてください。絶対： -

多くのおかげで、Zインデックスを追加する

Answer 1

CSSから、#club_menuのIMG {位置を追加見えます; top：0px;左：0px;}

リンク要素のサイズと幅を（display：block、またはdisplay：inline-blockを使用して）ブロックとして指定し、ブロックを互いにインラインにする必要がある場合は、position relative

子要素（h2、image）の位置が完全に指定できる任意のリンクは、相対的なものになります。

ほとんどの場合、画像の上にテキストを表示するには、z-indexについての以前の回答を組み込む必要があります。

Answer 2

試行画像がリンクオブジェクトの内部absolutly配置arn'tようhttp://www.w3schools.com/cssref/pr_pos_z-index.asp