Lite-Javascript Gallery - Can I position the img absolutely in relationship to the <li>s?

Question

I have a lite-javascript run image gallery. The javascript grabs each <img> element in the list and places it as a background in the parent <li> element. Then the CSS styles the thumbnails as small blocks with a defined height/width. A click-event for each <li> object toggles its child’s <img> element’s visibility and adds an “active” class name to the <li>. Using CSS, I'm trying to place the <img> absolutely to make it appear at the same position for each thumb, but it's moving in relation to the thumbs.

Here's the CSS:

#jgal li {
    background-position:50% 50%;
    background-repeat:no-repeat;
    border:solid #999 4px;
    cursor:pointer;
    display:block;
    float:left;
    height:60px;
    width:60px;
    margin-bottom:14px;
    margin-right:14px;
    opacity:0.5;
}

#jgal li img {
    position:absolute;
    top:0px;
    left:210px;
    display:none;
}

And the site: http://www.erisdesigns.net

Thanks in advance for any help!

Answer 1

if you want the <img> to appear at the same position:

#jgal {
  list-style: none outside;
  margin-top: 30px;
  position: relative;
  width: 200px;
}

#jgal li {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border: 3px solid #999999;
  cursor: pointer;
  display: block;
  float: left;
  height: 60px;
  margin: 0 14px 14px 0;
  opacity: 0.75;
  position: static;   // Need to specify static since you have style li { position: relative; } inside another css file
  width: 60px;
}

#jgal li img {
  border: medium none;
  display: none;
  left: 300px;
  position: absolute;
  top: 0;
}

If you want img to be shown near the thumb - change position: static; to position: relative; for #jgal li {

Answer 2

position:absolute elements base their positioning to the closest parent element with position:relative

If you want the image to be relative to the <li>'s position, all you should need to do is add position:relative; to the #jgal li.

If you want to position it relative to #jgal, you can apply the position:relative there instead, and make sure the #jgal li is position:static (which is default, unless you are overriding it somewhere)