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

Because your graphic is anchored to the horizontal center of your page, you can use the same center, then offset.

#switch {
  height:50px;
  width:50px;
  background: #F00; /* Just so we can see it */
  position: absolute;
  top: 150px;
  left: 50%;  /* Put the left edge on the horizontal center */
  margin-left: 148px; /* Move it 148px to the right of the horizontal center, placing it over the lightswitch */
 }