Absolute Positioning Inside Float or Relative

Problem:

I have a gallery with varying images so I need to use float so that the images line up correctly.  The problem is that I need to display a shade over the image when the mouse goes over the image.  It needs to look like the images below.  The problem is that if I set the shade div as position:absolute, it is absolute to the document.

 

Solution:

The solution is to put in a “position:relative” into the floating div or the div that will contain the absolute element.  In other words the shade (with the absolute position) will have its coordinates relative to the image (the floating div).  Adding “position:relative” puts a position on the floating div and restricts the absolute positioning to within that div.

 

.person_cell {
    position: relative;
    float:left;
    width:125px;
    height:125px;
    margin:3px;
}
.shade {
    position:absolute;
    left:0;
    top:0;
    background:black;
    width:100%;
    height:100%;
    zoom:1;
    opacity: 0.5;
    filter: alpha(opacity = 50);
}

Thanks to this post for the info.