CODEWITHSUNDEEP
jqueryhoverz-index
jstacks
jstacks

Reputation: 2437

jQuery: can I use z-index to solve this?

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!

Upvotes: 4

Views: 135

Answers (4)

T I
T I

Reputation: 9933

change

<a href="icon.html"><img src="icons/icon.png" /></a>

<div class="topTip">
    <div class="topTipText">hello</div>
</div>
<div class="topDrop">What's 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's up</div>

also added .topIconOld as spacer for where you don't won't red icon to preserve spacing. Hopefully you'll see in this fiddle it's the first time I have used it for sharing etc :-)

Upvotes: 1

cellcortex
cellcortex

Reputation: 3176

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;
}

Upvotes: 1

Andrew Odri
Andrew Odri

Reputation: 9442

Perhaps give this a try: http://jsfiddle.net/sdPVG/

I've added a negative margins to compensat for the box height and border width. This seems a bit hackish, but is actually very well supported across many different browsers.

Hoep that helps!

Upvotes: 1

Emre Erkan
Emre Erkan

Reputation: 8482

Change the two CSS properties of .topTip to these:

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

And add this CSS property to .topIcon:

position: relative;

Updated jsFiddle

Upvotes: 2

Related Questions