fixed element disappearing on zooming, need help!

[fa_dy]

Hello guys, hope all of you're doing good. I have run into a little problem and I was wondering if you guys can help me. I have put up a little yellow square on the left side of my website http://www.allwebutilities.com/public/and have set it's position to 'fixed' and the z-index to '999' so that it stays in its place. Now the problem which I am facing is that when I zoom in my browser using 'ctrl' + '+' to lets say 125% (in chrome), that yellow box deviates from it's position and sticks to the vertical scroll bar. And when I further zoom in, it completely disappears. What I want is that it should stay in its place regardless of me zooming in or out. Please help me guys. The code is really simple:

 

This is the code generating the yellow box:

 

<div class="fixed-head">
           <div class="tile bg-color-yellow icon" data-role="tile-slider" data-param-period="6000">
                       <div class="tile-content">
                           <img src="images/cus2.png" class="imgg" />
                       </div>
               </div>
           </div>

 

This is the code which is making it stick to it's place:

 

.fixed-head {
 position: fixed;
 top: 170px;
 margin-left: 820px;
}

[Love2c0de]

Rather than using margin left, because you have positioned it as 'fixed' you can change the 'right' property.

 

Try this:

.fixed-head
{
 position: fixed;
 top: 170px;
 right: 0px;
}

 

This will position your div directly in contact with the right hand side of the browser. Just change the value to what you need.

 

I just viewed your source code and I don't think you need this: <div class="tile-group tile-drag" style="position: relative;">. I wouldn't mind betting that you've used software such as wordpress or similar?

 

Hope this helps.

 

Kind regards,

 

L2c.

Edited February 3, 2013 by Love2c0de