How to display text on top of the image ?

Question

I have an image called social-share-icon.gif.This image containing facebook,twitter and google+ icon.

In Css i need to use all icon as seperate.I don't have any idea how to use this.

Some one please help with example code.

Answer 1

In Css using Position relative and absolute you can put the text on top of the image.

For Example:

.container {
  position:relative;
}

.text_on_top {
postion:absolute;
top:0px;
left:10px;
}


<div class="container"> 
   <img src="image.png" alt="image" />
    <p class="text_on_top">Text for Image on the top</p>
<div>

Refer More Details for about position relative vs absolute