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

absolute, css, html, positioning

Solution

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 */
 }

Problem

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?

Original source