將文字置於圖像上的問題（CSS，相對定位）

Question

所以我的問題是這樣的;我有一個圖像菜單（4張照片），我想要在每張照片的頂部顯示一些文字。我之前做過，但由於某種原因，這次它的全部梨形。我不想在css中將圖像設置爲背景，因爲我認爲它們是內容並希望它們處於標記中。

這裏是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> 

我已經被玩弄了一個多小時，現在和標籤只是所有的地方。我的圖像完美無缺。有人可以用一些CSS技巧，請賜教。

非常感謝，

Answer 1

從CSS，它看起來像圖像arn't鏈接對象內部是絕對位置添加一個#club_menu IMG {位置：絕對;頂：0像素;嘗試使用（display：block;或display：inline-block，如果您需要塊彼此內聯）將塊鏈接元素的大小和寬度指定爲塊，並且位置相對

然後任何子元素（h2，圖像）位置可絕對指定將相對於鏈接。

您大多可能需要合併以前關於z-index的答案才能在圖像上獲取文本。

Answer 2

嘗試添加的z-index - http://www.w3schools.com/cssref/pr_pos_z-index.asp