Fixed Div moves to left and right when resizing window

Question

I have this fixed div:

 * { margin: 0; padding: 0; } div { height: 200px; width: 200px; position: fixed; bottom: 1%; left: 1%; box-shadow: 0 0 5px -1px silver; }

 <div> <h1>Test</h1> </div>

It moves from right to left when resizing the window. Is there a way to fix this problem?

Answer 1

It is because when using values in % the measurements are done relative to the width/height of container(can also be body). So if you resizes browser window the sizes changes so measurements also changes.

Here measurements changes according to body.

To prevent this you can use absolute values like in px cm ..... in bottom top property