divs overlapping & Z-Index

[Sharonig]

Hi,

I have yet another question. I have an error tooltip, which its parent is ‘x’. ‘x’ has a sibling div (‘y’). The problem is that the tooltip gets cut when it reaches div ‘y’. (see image)The tooltip has a greater Z-Index, but as I understand it only applies in the parent.

Is there a way to make the tooltip on top? (overflow property didn’t work).

Thanks,
Sharon

[runa]

The red one is X and the one to the right is Y, right? The problem could be, that X and Y are floating left inside a wrapper div. If so, the z-index doesn’t work then, because z-index and float are contradictions. Z-Index is positioning by design, float is positioning by nature. No z-index without positioning.

Without having tried myself, give these ideas a chance:

1. Give X an overflow:display. May be Y is drifting to the right, I’m not sure.

2. Give the tooltip itself an absolute positioning (X must be position:relative then) and a z-index that is higher than the z-index of the wrapper div. This works fine if the tooltip is a hover-event, I am not sure what will happen in your case.

[Sharonig]

1. I guess you meant overflow: visible. right? It didn’t work
2. My tooltip has already an absolute position. Adding a relative position to its parent didn’t work…

I’ll try to look for other solutions, thanks anyway…

[Author]

Posts