html - getting text to sit on top of image -

i have grid of images 3x3. i'd able text sit above each image can't seem figure out how it.

my css

 body{background-color:black;}  ul#grid {   list-style: none;   width: 1180px;   margin:0 auto;   overflow:hidden;    }  #grid li {   float: left;   margin: 0 10px 70px 0px;   display:inline;   position:relative;    }  #grid li img {   padding: 15px; margin: 0;   width: 339px;   height: 211px;   position:relative;    } 

the html

<div class="portfolio">   <ul id="grid">        <li><a href="#"><img src="1.jpg"></a></li>     <li><a href="#"><img src="2.jpg"></a></li>     <li><a href="#"><img src="3.jpg"></a></li>     <li><a href="#"><img src="4.jpg"></a></li>     <li><a href="#"><img src="5.jpg"></a></li>     <li><a href="#"><img src="6.jpg"></a></li>     <li><a href="#"><img src="7.jpg"></a></li>     <li><a href="#"><img src="8.jpg"></a></li>     <li><a href="#"><img src="9.jpg"></a></li>      </ul></div> 

jsfiddle

i think meant this: http://jsfiddle.net/feitla/dwuch/3/

(edited fiddle: had fun :)

#grid li span {     display:block;     bottom:200px;     position:relative;     width:370px;     margin-left:20px; }  <div class="portfolio">     <ul id="grid">         <li><a href="#"><img src="1.jpg" /><span>lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>         </li>         <li><a href="#"><img src="2.jpg" /><span>lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>         </li>         <li><a href="#"><img src="3.jpg" /><span>lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>         </li>         <li><a href="#"><img src="4.jpg" /><span>lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>         </li>         <li><a href="#"><img src="5.jpg" /><span>lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>         </li>         <li><a href="#"><img src="6.jpg" /><span>lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>         </li>         <li><a href="#"><img src="7.jpg" /><span>lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>         </li>         <li><a href="#"><img src="8.jpg" /><span>lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>         </li>         <li><a href="#"><img src="9.jpg" /><span>lorizzle ipsizzle shizzlin dizzle hizzle amizzle, consectetuer adipiscing elizzle. </span></a>         </li>     </ul> </div>