无论窗口大小如何，如何固定CSS中元素的位置？

Question

我正在尝试设置框，以便我可以相应地添加其他元素。然而，这些框的位置会根据我使用的显示器或我是否在浏览器上进入全屏模式而不断变化。

我尝试使用相对单位（vh，vw）作为边距，但这没有帮助。这是我的 html 和 css:

.main {
  display: flex;
  position: fixed;
  height: 1036px;
  width: 1280px;
  padding: 0 96px 0 96px;
  border: 2px solid red;
  z-index: 3;
  margin: 0 300px 0 300px;
  box-sizing: border-box;
}

.header {
  position: relative;
  justify-content: center;
  align-items: center;
  height: 1036px;
  width: 528px;
  z-index: 3;
  border: 2px solid white;
  padding: 35px 0 66px 0;
  overflow: hidden;
}

<section class="main">
  <section class="header">
  </section>
</section>

Answer 1

我认为您正在尝试为您的组件创建某种固定布局。我认为问题是由于您使用的固定值以及位置和显示的滥用造成的：flex。尝试使用这个CSS代码也许它可能对你有用``

.main {
  position: relative;
  height: 100vh;
  width: 100%;
  padding: 0 5%;
  border: 2px solid red;
  box-sizing: border-box;
}

.header {
  position: absolute;
  top: 20%;
  left: 10%;
  justify-content: center;
  align-items: center;
  height: 60%;
  width: 40%;
  border: 2px solid white;
  padding: 3% 0 6% 0;
  overflow: hidden;
}

`我非常确定问题出在固定单位与相对单位之间