오른쪽 그림에 HTML 텍스트가 나타납니다.

Question

이상한 이미지. HTML 텍스트 줄을 가져 오려고합니다.이 경우에는 전자 상거래 사이트의 홈페이지에 대한 SHOP BAGS라고 말하면서 문제는 잘못된 이미지 위에 나타나는 것입니다. 나는 이미지를 감쌌다. 텍스트가 자신의 div에 나타나길 바란다. CSS를 다시했지만 아직 제대로 작동하지 않는다. 이유를 알아 내려고 애쓰는 데 어려움을 겪었습니다. 절대 포지셔닝을 바꾸고 싶지는 않습니다. 누군가가 픽을 가지고 픽스를 제안 할 수 있습니까?

http://originalchuck.com/

Answer 1

절대 위치 요소들은 다음의 상대 위치 소자의 top 가고있다. 상위 위치 관계를 상대 위치로 만들어 부모 요소의 범위에 대한 절대 위치 경계를 줄입니다.

.thumbnail a { 
    position: relative; 
    display: block;  
} 

내가 위에서 때문에 .text-content 같이 적용될는 브라이언의 a 태그 내에

.thumbnail a { 
 
    position: relative; 
 
    display: block;  
 
} 
 

 
span.text-content { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 15px; 
 
    color: #fff; 
 
    font-size: 24px;  
 
}

<div class="thumbnail"> 
 
    <a href=""> 
 
     <img src="http://placehold.it/580x278/333333/" alt="" /> 
 
     <span class="text-content"><span>Shop Buckets</span></span> 
 
    </a> 
 
</div> 
 

 
<div class="thumbnail"> 
 
    <a href=""> 
 
     <img src="http://placehold.it/580x278/333333/" alt="" /> 
 
     <span class="text-content"><span>Shop Bags</span></span> 
 
    </a> 
 
</div>