CSS: Absolute Positioning

I was using the JCarousel package to create a 'Related Items' carousel to style the WordPress plugin for 'Related Items'. CSS is a tricky area for me especially things like positioning.

On this particular piece of functionality that I was building, when the user hovered a 'Related Item', an overlay needed to pop-up exactly over it with some additional information.

Basically, a
<ul> tag is created with several <li>, each </li> <li> contains two <div> tags. One is the 'active' div and the other is the 'inactive' div. When the 'inactive' div is hovered you want the 'active' div to show.

For the most part it worked fine, however, I noticed that the first 4 related items worked fine, however, the last would hover up and over to the left rather than right over the image being hovered. So confusing. Anyway, it goes back to understanding absolute positioning.

I had the 'active' class defined like this:

.active {
width:160px;
height:160px;
display: none;
position:absolute;
top:0;
left:-1;
z-index:2;
}

This should pop this div up from its original placement to cover the 'inactive' div.

My problem was solved by explicitly making the parent of this (which in my case was  a <li> classed as 'jcarousel-item') marked as position:relative like so:

.jcarousel-skin-tango .jcarousel-item {
    width: 165px;
    height: 165px;  
    position:relative;  
}

Apparently child items that are absolutely position need the parent to be relative. By default it is static, that is why I was getting the odd last item positioned funny.

This post helped me to better understand things.