Jump to content

[Solved] Positioning an element above another without Fixed positioning


Recommended Posts

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>


.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 by wongadob
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...