title: Lite-Javascript Gallery - Can I position the img absolutely in relationship to the <li>s?
body: <p>I have a lite-javascript run image gallery.  The javascript grabs each <code>&lt;img&gt;</code> element in the list and places it as a background in the parent <code>&lt;li&gt;</code> element. Then the CSS styles the thumbnails as small blocks with a defined height/width. A click-event for each <code>&lt;li&gt;</code> object toggles its child’s <code>&lt;img&gt;</code> element’s visibility and adds an “active” class name to the <code>&lt;li&gt;</code>. Using CSS, I'm trying to place the <code>&lt;img&gt;</code> absolutely to make it appear at the same position for each thumb, but it's moving in relation to the thumbs.</p>
  <p>Here's the CSS:</p>
  <pre><code>#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;
  }
  </code></pre>
  <p>And the site: <a href="http://www.erisdesigns.net" rel="nofollow noreferrer">http://www.erisdesigns.net</a></p>
  <p>Thanks in advance for any help!</p>