The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Child z-index not over-riding parent element problem

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #38554

    Hi CSS Tricks. First time poster, long time site admirer here :o)

    Please check out this site i’m creating…

    The part i’ve got a problem with is the menu. That’s the balloons that are rotating slowly. Notice that I have added background colours to the elements in question for testing purposes.

    My problem is in the thread title. I have attempted to set the .btn elements at z-index:99 but this is getting overwritten by it’s containing element. Try rolling over the pink boxes, to illustrate what i’m talking about. Some will change on hover.

    Can anybody suggest a better way to approach this one?

    Thanks, Alistair


    It doesn’t really have anything to do with the child elements — it’s actually all parent elements getting in eachother’s way.

    Let’s say….. If, during a specific time, two balloons are overlapping eachother (1 and 2), then balloon 1 will never become “active” on mouseover (and the span inside it will never become visible), because balloon 2 is on “top” of it and is obstructing it. They both have the same Z-index (5), so the one that comes later in the markup will be on top of the other one.

    Try it by giving #balloon-1 a red border, and #balloon-2 a green border. You’ll see that you’ll never be able to make balloon 1 active, because it’s always overlapped by the area of balloon 2.

    I’m sure you have a good reason for making those areas much larger than the actual balloons, but you’ll have to rethink it a bit because this way, balloon 6 is practically always taking precendence over all the other balloons, since it is on top of all the others.

    Hope that helps!

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.