文字覆蓋圖像不能正常工作

Question

我有一個文字圖像，我想覆蓋它，它將圖像下方的文字以及不顯示它。不知道爲什麼這不起作用。任何幫助，將不勝感激。

這裏是我的代碼：

<div class="product-hero-container"> 
<div class="product-hero"> 
<img src="./images/image.jpg" alt="Title"> 
<div class="product-hero-text"> 
<h1>Title</h1> 
<h2>Sub title</h2> 
<p>Description</p> 
</div> 
</div> 
</div> 

這裏是我的CSS：

.product-hero-container { 
position: relative; 
margin: 0; 
padding: 0; 
overflow: hidden; 
width: 100%; 
background: #fff; 
} 

.product-hero-container img { 
display: block; 
} 

.product-hero { 
position: relative; 
width: 100%; 
height: 100%; 
} 

.product-hero-text { 
position: absolute; 
overflow: hidden; 
padding: 12px; 
font-family:'Roboto', arial, sans-serif; 
color:#FFF; 
} 

Answer 1

似乎您需要對.product-hero-text類的左，上，右和/或底部聲明，以便將其放置到位。

.product-hero-text { 
position: absolute; 
overflow: hidden; 
left: 0; /* for example */ 
top: 0; /* for example */ 
padding: 12px; 
font-family:'Roboto', arial, sans-serif; 
color:#FFF; 
} 

Answer 2

在你的絕對定位的元素設置z-index: 1;。