The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

divs overlapping & Z-Index

  • # July 16, 2009 at 4:01 pm


    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).


    # July 16, 2009 at 8:29 pm

    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.

    # July 19, 2009 at 4:56 am

    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…

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed