Question

Before going into the problem, I thought it’d be best to describe what I’m trying to do… if you go to this fiddle you can see it in (although with problems present) in action:

http://jsfiddle.net/jhacks/xCcdn/99/ (it needs to have jQuery selected to work)

The problem I’m trying to solve with this post is pretty blatantly screwed up in the fiddle. Due to the ordering of my html, the tooltip (topTip) pushes the notification icon (topIconNew) downwards when it is present. Obviously, the notification icon should remain stationary. I do not want to reorder the html, as the notification icon will not always be present. Therefore, they can all be positioned using the same class. I think the solution should be z-index? However, my attempts at using CSS to solve it don’t seem to work… I assume there is something I must do in the jQuery perhaps?

If anyone could help me here it’d be greatly appreciated. Let me know if I need to be more clear with what I’m looking to do here and I’ll try to better explain. Thanks!

Answer 1

I hope I get the question correctly. I would recommend to use absolute positioning to keep the icons where they are when the tooltip is shown. You should also set the .topIcon position to ‘relative’ so the absolute position of the tooltip relates to it. The changes will be somewhat like this. (Not sure about the actual numbers for the position.

.topIcon {
    position: relative;
}

.topIconNew {
    bottom:-20px;
    right:14px;
    position: absolute;
}