Исправить текст на изображении в css

Question

Мне нужно отобразить строку на изображении в фиксированном положении. Мой код выглядит следующим образом:

HTML код:

<div> 
      <img id='flower' src="http://cs-server.usc.edu:45678/hw/hw3/images/main.jpg" alt="Flower"> </img> 
      <div id='title' style='margin-top: -19px;'> 
      <h2><span id='yellow_text'>Yellow </span><span id='flower_text'>Flower<span></h2> 
      <h3><span id='author_name'>A site by Brian Calhoun</span></h3> 
     </div> 

код Css:

#flower{ 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
} 

мне нужен текст под #title тег всегда отображать в определенном положении на изображении # цветок

Answer 1

Это идеальное использование position absolute;.

Если вы обернуть изображение в DIV (который создает position: relative контейнер для нашего название будет расположена внутри), например так:

<div> 
    <div class="image_wrapper"> 
     <img id='flower' src="http://cs-server.usc.edu:45678/hw/hw3/images/main.jpg" alt="Flower"> </img> 
     <div id='title'> 
      <h2><span id='yellow_text'>Yellow </span><span id='flower_text'>Flower<span></h2> 
      <h3><span id='author_name'>A site by Brian Calhoun</span></h3> 
     </div> 
    </div> 
</div> 

Затем примените эти стили:

.image_wrapper { 
    display: inline-block; 
    position: relative; 
    /* this will center the image in the container */ 
    margin: 0 auto; 
} 

#title { 
    position: absolute; 
    top: 25px; /* adjust as desired */ 
    left: 15px; /* adjust as desired */ 
}