Html 是什么让我的CSS在缩小或缩小时崩溃？

我一直在开发一个小的web应用程序，每当我放大或缩小时，它的布局都会被破坏。我在网上和论坛上尝试了许多解决方案，包括在css中使用em而不是px单元。正如下图所示，这并没有解决问题。

我希望在大屏幕和小屏幕上都能看到这样的画面：

我猜问题在于我如何定位元素，但除了对问题可能在哪里有一点概念之外，我还被难住了。有人能指出问题的原因吗

这是我正在使用的HTML和CSS

。容器流体{
最小宽度：1366px；
最大宽度：2048px；
保证金：0px自动；
宽度：100%；
}
布朗先生1{
位置：固定；
顶部：3.125em；
左：29.375em；
浮动：对；
}
.brow1>div{
右边框：3px实心#328adb；
显示：内联块；
宽度：4rem；
身高：4rem；
证明内容：中心；
文本对齐：居中；
背景：rgba（255,255,255,0.739）；
位置：相对位置；
}
布朗先生2{
位置：固定；
顶部：3.125em；
右：3.438em；
}
.brow2>div{
边界底部：0.188em实心#328adb；
边缘底部：0.250em；
显示：块；
宽度：4rem；
身高：4rem；
证明内容：中心；
文本对齐：居中；
背景：rgba（255,255,255,0.739）；
位置：相对位置；
}
布朗先生3{
位置：固定；
底部：8.125em；
右：3.438em；
}
.brow3>div{
左边框：3倍实心#328adb；
显示：内联块；
宽度：4rem；
身高：4rem；
证明内容：中心；
文本对齐：居中；
背景：rgba（255,255,255,0.739）；
位置：相对位置；
}
布朗先生{
位置：固定；
顶部：7.813em；
左：29.375em；
}
.brow4>div{
边界顶部：0.188em实心#328adb；
边缘底部：0.313em；
显示：块；
宽度：4rem；
身高：4rem；
证明内容：中心；
文本对齐：居中；
背景：rgba（255,255,255,0.739）；
位置：相对位置；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
25
24
23
22
21
20
19
18
17
16
30
29
28
27
26

如果您希望元素显示在特定位置，那么最好使用

位置：绝对-

-您可以将东西精确放置在您想要的位置。这在响应性强的网站中并不经常使用，但您的要求是固定宽度的显示，因此在这种情况下，它非常适合您

您可以创建一个容器，该容器具有

位置：relative

——这意味着我们放置在其中的元素是相对于它的，即它们包含在其中，并且所有位置都是相对于该容器内部的

然后，对于您的元素，使用

位置：绝对

，并使用

顶部

，

左侧

等将它们精确放置在您想要的位置

现在，您可以将新容器（在下面的示例中，我将其命名为class

brow container

）放置在您想要的任何位置，所有元素都将作为单个单元移动，而不必单独测量每个元素的位置

工作示例： 仅供参考，我已从

.container fluid

中删除了最小宽度，因此您可以在代码段窗口中看到它：

。容器流体{
最大宽度：2048px；
保证金：0px自动；
宽度：100%；
}
.brow容器{
保证金：0px自动；
宽度：500px；
高度：290px；
位置：相对位置；
}
布朗先生1{
位置：绝对位置；
排名：0；
左：0；
}
.brow1>div{
右边框：3px实心#328adb；
显示：内联块；
宽度：4rem；
身高：4rem；
证明内容：中心；
文本对齐：居中；
背景：rgba（255,255,255,0.739）；
位置：相对位置；
}
布朗先生2{
位置：绝对位置；
排名：0；
右：0；
}
.brow2>div{
边界底部：0.188em实心#328adb；
边缘底部：0.250em；
显示：块；
宽度：4rem；
身高：4rem；
证明内容：中心；
文本对齐：居中；
背景：rgba（255,255,255,0.739）；
位置：相对位置；
}
布朗先生3{
位置：绝对位置；
底部：0；
右：0；
}
.brow3>div{
左边框：3倍实心#328adb；
显示：内联块；
宽度：4rem；
身高：4rem；
证明内容：中心；
文本对齐：居中；
背景：rgba（255,255,255,0.739）；
位置：相对位置；
}
布朗先生{
位置：绝对位置；
顶部：40px；
左：0；
}
.brow4>div{
边界顶部：0.188em实心#328adb；
边缘底部：0.313em；
显示：块；
宽度：4rem；
身高：4rem；
证明内容：中心；
文本对齐：居中；
背景：rgba（255,255,255,0.739）；
位置：相对位置；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
25
24
23
22
21
20
19
18
17
16
30
29
28
27
26

如果您希望元素显示在特定位置，那么最好使用

位置：绝对-

-您可以将东西精确放置在您想要的位置。这在响应性强的网站中并不经常使用，但您的要求是固定宽度的显示，因此在这种情况下，它非常适合您

您可以创建一个容器，该容器具有

位置：relative

——这意味着我们放置在其中的元素是相对于它的，即它们包含在其中，并且所有位置都是相对于该容器内部的

那么对于y