0

I have a div as a direct child node of body which is absolutely positioned, with css properties defined as below:

 div[id^="Container"] {
   display: block;
   position: absolute;
   width: 600px;
   height: 250px;
   z-index: 999999;
   background: tomato;
   top: 217px;
   right: 206px;
 }

Whenever I zoom in the div it shifts towards left.

I don't understand the exact reason why this is happening. I tried searching online, but did not get any solution.

I tried setting the right position in %, since I thought may be while I zoom in, but the browser rounds up the right position value.

Alex da Silva
  • 4,552
  • 2
  • 17
  • 25
nyfer
  • 95
  • 2
  • 3
  • 11

2 Answers2

0

I think it is because for example if you zoom 200% your right property is equal to 412px (not 206).

max
  • 8,632
  • 3
  • 21
  • 55
0

The key here is to use right: 50% and margin-right: -300px (half of the width of your div). Here is an example in jsfiddle.

Hawkings
  • 533
  • 3
  • 16
  • May i know, how that helps. i want to understand why that is happening – nyfer Oct 16 '15 at 03:32
  • You are trying to keep the div centered at all times, so you must use percentage (or vw units) to keep it in the center, otherwise it will be at a fixed distance from the right border and if you resize the window or zoom that fixed distance won't put your div in the exact center. – Hawkings Oct 16 '15 at 03:36
  • Actually am not trying to center the div, but rather at certain position ie (206px) from right. how can achieve that . – nyfer Oct 16 '15 at 06:13
  • If you are not trying to center the div your code should be fine, it's okay for elements to move on browser zoom, and most users don't zoom ever. However, if you REALLY want to do it, you can use a percentage value (but this will position the div in different places with different screens) or try to detect a zoom with javascript and modify the position of the element. I don't recommend it though, but if you want to learn how to do it you can read this http://stackoverflow.com/questions/995914/catch-browsers-zoom-event-in-javascript – Hawkings Oct 16 '15 at 06:19