为什么在html中最小化窗口形状移动？

我正试图将一个八角形放在另一个八角形的内部，但问题是当我最小化web浏览器的屏幕时，形状会移动，我希望你能帮助我解决这个问题，因为我不明白为什么会发生这种情况，提前谢谢

.octagonWrap{
宽度：400px；
高度：400px；
浮动：左；
位置：绝对位置；
溢出：隐藏；
排名前10%；
左：20%；
}
八角星{
宽度：300px；
高度：300px；
浮动：左；
位置：绝对位置；
溢出：隐藏；
顶部：270px；
左：241px；
}
八边形{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
溢出：隐藏；
变换：旋转（45度）；
背景：rgb（255、255、255）；
边框：3倍实心rgb（0,0,0）；
}
八角二号{
位置：绝对位置；
顶部：5px；
右：5px；
底部：5px；
左：5px；
溢出：隐藏；
变换：旋转（45度）；
背景：rgb（255、255、255）；
边框：3倍实心rgb（0,0,0）；
}
奥克塔贡：以前{
位置：绝对位置；
/*这里需要有一个负值才能取消
*超出边界宽度。当前为-3px，
*但是如果边界是5px，那么它将是-5px。
*/
顶部：-3px；
右：-3px；
底部：-3px；
左：-3px；
变换：旋转（45度）；
内容：''；
边界：继承；
}
八角二号：之前{
位置：绝对位置；
/*这里需要有一个负值才能取消
*超出边界宽度。当前为-3px，
*但是如果边界是5px，那么它将是-5px。
*/
顶部：-8px；
右：-8px；
底部：-8px；
左：-8px；
变换：旋转（45度）；
内容：''；
边界：继承；
}

文件

我认为这是因为百分比

.octagonWrap {
    ...
    top: 10%;
    left: 20%;
  }

如果屏幕为1000px，则顶部为100px；如果屏幕为2000px，则顶部为200px

---

如果它们是特定的数字/像素，位置将保持不变。基本上。

那么我应该删除它吗？尝试一下，将10%更改为20px。尝试将20%更改为40px。或者任何数量的像素都是最好的。