Absolute repositioning of list items

by audetwebdesign

HTML

<div calss="panel-wrap">
<ul  class="rank">
    <li class="rank-1">
        <img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/Tetra_pak_New_packaging_Juice7_by_KATOK.jpg" />
        <p>1</p>
    </li>
    <li class="rank-2">
        <img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/21.jpg" />
        <p>2</p>
    </li>
    <li class="rank-3">
        <img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/10.jpg" />
        <p>3</p>
    </li>
</ul>
</div>

CSS

.panel-wrap {
    width: 460px; 
}
ul.rank {
    list-style: none outside none;
    padding: 0;
    margin: 0;
    position: relative;
    border: 1px solid gray;
    height: 200px;
}
ul.rank li {
    width: 150px;
    top: 0;
    bottom: 0;
    border: 1px solid red;
    position: absolute;
}
ul.rank img {
    width: 150px; 
    xheight: 90px;
}
ul.rank p {
    border: 1px dotted blue;
    text-align:center;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: 0;
}
.rank-3 {
    top: 0;
    left: 0;
}
.rank-1 {
    top: 0;
    left: 160px;
}
.rank-2 {
    top: 0;
    left: 320px;
}