JQuery: is it possible to use z-index to solve this problem?

Question

Before moving on to the problem, I thought it was best to describe what I'm trying to do ... if you go to this fiddle, you can see it (albeit with problems) in action:

http://jsfiddle.net/jhacks/xCcdn/99/ (jQuery must be selected for it to work)

The problem that I am trying to solve with this message has been rather blatantly twisted in the violin. Due to ordering my html tooltip (topTip) pushes the notification icon (topIconNew) down when it is present. Obviously, the notification icon should remain stationary. I do not want to reorder html, as the notification icon will not always be present. Therefore, they can all be located using the same class. I think the solution should be z-index? However, my attempts to use CSS to solve it don't seem to work ... I suppose there is something in jQuery that I can do?

If anyone could help me, that would be very grateful. Let me know if I need to understand more clearly what I am doing here and I will try to explain better. Thank you

Answer 1

I hope I'm asking the right question. I would recommend using absolute positioning to keep the icons where they are when the tooltip is displayed. You should also set the .topIcon position to “relative,” so that the absolute position of the tooltip refers to it. The changes will be something like this. (Not sure about the actual numbers for the position.

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

Answer 2

Change the two CSS .topTip properties to the following:

 position: absolute; top: 40px; right: 0px; 

And add this CSS property to .topIcon :

 position: relative; 

Updated jsFiddle

Answer 3

Maybe try: http://jsfiddle.net/sdPVG/

I added negative margins to compensate for the height and width of the frame. This seems a bit hacky, but is actually very well supported in many different browsers.

Hoep that helps!

Answer 4

change

 <a href="icon.html"><img src="icons/icon.png" /></a> <div class="topTip"> <div class="topTipText">hello</div> </div> <div class="topDrop">What up</div> <div class="topIconNew"></div> 

to

 <a href="icon.html"><img src="icons/icon.png" /></a> <div class="topIconNew"></div> <div class="topTip"> <div class="topTipText">hello</div> </div> <div class="topDrop">What up</div> 

.topIconOld is also added as a spacer, where you will not be a red icon to save the interval. Hope you see it in this fiddle the first time I used it for sharing, etc .:-)