Why does a dynamic popup affect the rendition of adjacent elements?

Question

I'm creating a popup using a div element over a JSP page td element.

A blackbox specifies (dynamically) which td elements may display the popup, and the content to be shown in the popup 'floating' to the right of the element, and a little above it's centre.

The CSS applied to the div element are as below

.shewn{
   background-color:    #fffc80;
   overflow:            auto;
   z-index:      100;
   border:   .1em solid rgb(200, 128, 0);
   float:    right;
   top:   -10px;
   align:    center;
   margin:   5px 5px;
   height:   inherit;
   width:    inherit;
   position:     absolute;
   white-space:  no-wrap;
}

.hidden{
   z-index:      -1;
   display:      none;
}

Each div element is hidden until a mouseover/mouseout event applies to it's parent.

Adjacent elements on the same tr (without the popup created/bound tothem) appear to merge into each other unless the hidden div is displayed once.

If you have ever encountered such a problem, or know how to solve it, could you please let me know how?

EDITED: So it seems the problem I face appears because the parent element is 'relative', whilst the popup created is 'absolute'.

Regards, Abhishek