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

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)