将文本放在图像上的问题（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 看来，图像并没有绝对定位在链接对象内添加 #club_menu img {position:absolute;顶部：0px；左：0px;}

尝试使用 (display:block; 或 display:inline-block 如果您需要块彼此内联) 将链接元素的大小和宽度指定为块，并使用相对位置

那么任何可以指定的子元素（h2，图像）位置都将绝对与链接相关。

您很可能需要合并之前关于 z-index 的答案，以使文本覆盖图像。

Answer 2

尝试添加z-index - http://www.w3schools.com/cssref/pr_pos_z-index.asp