Fixed Div moves to left and right when resizing window-CodePudding

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?

CodePudding user response：

Use px instead of %

* {
  margin: 0;
  padding: 0;
}

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

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

CodePudding user response：

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