Текст на картинке с CSS

Question

Сначала я хочу сказать, что я довольно новичок с CSS. Без изменения моего кода я бы хотел иметь текст над изображением. Мой текущий код:

#container { 
 
width: 1010px; 
 
margin-left: auto; 
 
margin-right: auto; 
 
} 
 

 
#left-box { 
 
width: 681px; 
 
float: left; 
 
margin-right: 29px; 
 
} 
 

 
#data { 
 
width: 206px; 
 
height: 140px; 
 
background-color: #fff; 
 
float: left; 
 
margin-right: 10px; 
 
margin-left: 11px; 
 
margin-bottom: 20px; 
 
}

<div id="container"> 
 
    <div id="left-box"> 
 
    <div id="data"> 
 
\t <img src="img/img1.jpg" /> 
 
\t <<<< here I want put some text, which should be over the image >>>> 
 
\t <h2 class="h2-data"><a href="#">Some text</a></h2> 
 
\t <p class="stats">text</p> 
 
    </div> 
 
    </div> 
 
</div>

Я попытался добавить некоторый код, который я нашел в Google, но текст появляется в верхней части веб-сайта, когда я использую абсолютное как положение. И с относительным текст находится под изображением, но не над изображением.

Кто может мне помочь?

Answer 1

Использовать position: relative для блока, прилагающего изображение, и position: absolute для текста после присвоения ему класса.

#container { 
 
    width: 1010px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#left-box { 
 
    width: 681px; 
 
    float: left; 
 
    margin-right: 29px; 
 
} 
 
#data { 
 
    width: 206px; 
 
    height: 140px; 
 
    background-color: #fff; 
 
    float: left; 
 
    margin-right: 10px; 
 
    margin-left: 11px; 
 
    margin-bottom: 20px; 
 
    position: relative; 
 
} 
 
.text { 
 
    top: 0; 
 
    left: 100; 
 
    position: absolute; 
 
}

<div id="container"> 
 
    <div id="left-box"> 
 
    <div id="data"> 
 
     <img src="http://placehold.it/200x140"></img> 
 
     <div class="text"> 
 
     <<<< here I want put some text, which should be over the image>>>></div> 
 
     <h2 class="h2-data"><a href="#">Some text</a></h2> 
 
     <p class="stats">text</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

может быть, так

#container { 
 
width: 1010px; 
 
margin-left: auto; 
 
margin-right: auto; 
 
} 
 

 
#left-box { 
 
width: 681px; 
 
float: left; 
 
margin-right: 29px; 
 
} 
 

 
#data { 
 
width: 206px; 
 
height: 140px; 
 
background-color: #fff; 
 
float: left; 
 
margin-right: 10px; 
 
margin-left: 11px; 
 
margin-bottom: 20px; 
 
position: relative; 
 
} 
 

 
#data img{ 
 
    position: absolute; top: 0; left: 0; 
 
} 
 
#data .text{ 
 
    position: relative; 
 
}

<div id="container"> 
 
    <div id="left-box"> 
 
    <div id="data"> 
 
\t <img src="http://placehold.it/200x140" /> 
 
     <div class="text"> 
 
     <<<< here I want put some text, which should be over the image >>>> 
 
\t <h2 class="h2-data"><a href="#">Some text</a></h2> 
 
\t <p class="stats">text</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>