이미지 위에 텍스트 배치 (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> 

내가 지금 시간 이상 주위를 연주하고 레이블이 사방에 단순히 여기

은 내가했던 CSS입니다. 내 이미지가 완벽하게 자리 잡고 있습니다. 누군가 CSS로 기술을 가르쳐 주시겠습니까?

많은 감사,

Answer 1

, 그것은 같습니다 절대 ; 상단 : 0 픽셀; 왼쪽 : 0px;}

링크 요소의 크기와 너비를 (display : block 또는 display : inline-block을 사용하여) 블록으로 지정하고 각 블록이 서로 인라인되어야한다면 위치 상대 값

그러면 모든 하위 요소 (h2, 이미지) 위치는 절대적으로 링크에 상대적으로 지정 될 수 있습니다.

이미지 위에 텍스트를 가져 오려면 대부분 z- 인덱스에 대한 이전 답변을 통합해야합니다.

Answer 2

시도는 Z- 인덱스 추가 - 이미지가 #club_menu IMG {위치를 추가하려면 링크 개체 내에서 절대적 위치 arn't 같은 CSS에서 http://www.w3schools.com/cssref/pr_pos_z-index.asp