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?

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

Solution 2

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.

Solution 3

What you need to do is, think about where you want the element to be (fixed will stick it in a coordinate location X/Y, absolute, will move with the document, relative is quite clearly relative to where it is).

So with that said, I would recommend creating an 'anchor point' using

<div style="position: relative;" class="anchor-point">
   <div style="position: absolute; top: 100px; right: 50px;">
   <img href="" />
   </div>
</div>

The anchor-point means you can stick this element in an area of your page, the inner part, with position:absolute; lets you move FROM your anchor to anywhere you want (top/right/left/bottom), combine this with z-index to layer your elements just how you want it.

This will guarantee that your element (that is pos:abs) will stay where you want it.

Comments

[Thomas Jones]

if I then resize the left of the window, the element will still move.

[rgthree]

It will move, but with the center, the same as the graphic. It will still be placed over the lightswitch in your graphic as you resize the width of your window.

[Sean Zulu]

it still moved on resize but I came up with the solution of creating the switch as a separate image so it wouldn't matter too much if the position was slightly off.

[iTux]

this comment removed