Fixing a div to a certain position (stays fixed with window resize)

Question

Please refer to my site Vault X

I have been trying to make the light switch next to the vault a clickable function.

However, I cannot get my div to stay fixed on this position (adjusting the window size causes it to move about).

What is the best way to achieve this?

Answer 1

Doing position:absolute (or more appropriately here position:fixed) specifies a elements position outside the normal flow of the document relative to the first parent that has a position other than static (in this case (and always with position:fixed) the browser window).

As such, since youve specified a top and a right position, these values are fixed. When you move the right border in, the distance from the browser viewport must stay the same, so the element moves.

You can try positioning from the left, but that will only guard against resizing from the right (if I drag the left corners in, the element will move)

Alternatively, you should position this element statically within the document, within your #wrapper div so that resizing the window has no effect on document flow.