[Solved] Positioning an element above another without Fixed positioning

[wongadob]

Hi I am trying to position an element above another element. the element I want to position is a red blob that indicates there are notififctions to read in my system. I have a menu bar that has 5 icons on it. Each is 20% screen width. To save having lots of code here I have just included 1 element. All 5 are almost exactly the same (different icon art and id's is only difference). The issue I am getting is that the blob is appearing where I want it to, but it seems the system is allocating space for it below the icon bar. I have attached a simplified view of what is happening. The white bar between the green icon bar and the gray bar is where the problem lies. This white bar is exactly the same height as the red blob (20 pixels) and if I did not offset the position by -50 then it would sit here. But since I have offset the object by -50 and given it a higher z-index. Why is it still allocating here. I cannot use a fixed positon for 2 reasons, firstly earlier devices do not support fixed positioning and secondly there are many different screen resolutions. Joys of mobile dev. All I need to do is to lose this white bar. Please could you take a look at my HTML (as I say only show 1 div of 5 which are all the same across the screen) and CSS and let me know what I am doing wrong. Thanks in anticipation HTML

	 <div class="relative_div">	  <a ontouchstart="touchStart()" ontouchend="touchEnd(event,this)" onclick = "initNotifications()" >	   <img id = "icon-note" src = "art/newheader/notification_off.png" alt = "Notifications"	   onmouseover = "setMouseOverIconNote()" onmouseout = "setMouseOutIconNote()"/>	  </a>	  <div id = "unreadbox_notifications"><span class = "unread_box"></span>	  </div>	 </div>

CSS

.relative_div {width:20%;text-align:center;float:right;}.unread_box{position: relative;top:-50px;z-index: 500;width: 20px;height:20px;float:right;background-color: #ff0000;opacity:0.8;color: white;border-radius:10px;margin-right: 20%;}#unreadbox_notifications{visibility: hidden;}

PS I should state that the following ID's are modified by jQuery and do not have any CSS icon-note - This is modified to show versions of the icon required.unreadbox_notifications is switched on or off dependant on if there are notifications.

Edited August 3, 2012 by wongadob

[Krewe]

Mis read the question... sorry. ----Deleted----

Edited August 3, 2012 by Krewe

[dsonesuk]

using position relative, with top: -##px, will always leave a space that it originally occupied, have you tried just using margin-top: -##px; instead.

[wongadob]

Once again dsonesuk, you have saved my bacon. You Genius ! Thanks a million I have been trying to figure this out off and on for days! The margin-top -50 fixed it perfectly