为什么当我最小化 window 形状移动时 html？

Question

我想把一个八角形放在另一个八角形里面，但问题是当我最小化网络浏览器的屏幕时，形状会移动，我希望你能帮我解决这个问题，因为我不知道不明白为什么会这样，提前致谢

.octagonWrap {
    width: 400px;
    height: 400px;
    float: left;
    position: absolute;
    overflow: hidden;
    top: 10%;
    left: 20%;
  }
  
  .octagonWrapTwo {
    width: 300px;
    height: 300px;
    float: left;
    position: absolute;
    overflow: hidden;
    top: 270px;
    left: 241px;
  }
  
  .octagon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    transform: rotate(45deg);
    background: rgb(255, 255, 255);
    border: 3px solid rgb(0, 0, 0);
  }
  
  .octagontwo {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    overflow: hidden;
    transform: rotate(45deg);
    background: rgb(255, 255, 255);
    border: 3px solid rgb(0, 0, 0);
  }
  
  .octagon:before {
    position: absolute;
    /* There needs to be a negative value here to cancel
       * out the width of the border. It's currently -3px,
       * but if the border were 5px, then it'd be -5px.
       */
    top: -3px;
    right: -3px;
    bottom: -3px;
    left: -3px;
    transform: rotate(45deg);
    content: '';
    border: inherit;
  }
  
  .octagontwo:before {
    position: absolute;
    /* There needs to be a negative value here to cancel
       * out the width of the border. It's currently -3px,
       * but if the border were 5px, then it'd be -5px.
       */
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    transform: rotate(45deg);
    content: '';
    border: inherit;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div class='octagonWrap'>
        <div class='octagon'></div>
      </div>
      <div class='octagonWrapTwo'>
        <div class='octagontwo'></div>
      </div>
    </div>
</body>
</html>

这是代码片段中显示的代码，如果有人能向我推荐一些东西，我将不胜感激，谢谢！

Answer 1

我认为是因为百分比

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

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

如果它们是特定的 numbers/pixels，则位置将保持不变。本质上。

为什么当我最小化 window 形状移动时 html？

Why when I minimize the window shapes move in html?

html

css

shapes

web