css - 奇怪的行为 - body 宽度改变，div 变得不透明

Question

我的响应式 CSS 有一个非常奇怪的问题。主体宽度为 90%。

如果水平分辨率低于 1200 像素，我将其更改为 100%(使用媒体查询)，但在分辨率低于 1000 像素时，它应该再次为 100%。

我的页面有两个居中的容器，左侧的另一个在右侧的下方(在 z-index 后面)，它有一个背景图像。两个容器都具有流体宽度。

所以基本上当屏幕宽度低于某个点时，带有图像的左侧容器几乎不会位于右侧容器下方。右边的容器有 20px 的边距以留出一些空间。这 20 像素的边距应该是透明的。

这工作正常，但如果我在 1000 像素和 1200 像素之间缩放浏览器，右侧内容容器的边距会变得不透明，但它不应该。它应该是透明的，因为它的宽度更宽。

我不知道这种行为从何而来，因为我没有改变任何边缘的东西。

只需将浏览器的宽度缩放到 1000 像素到 1200 像素之间，然后您就会看到图像和内容之间的绿色间隙。 (如果你将 litte 缩放更多 tahn 1200px，你会看到边距再次透明)

抱歉有点难以解释

Answer 1

它不会变得不透明。

问题不在于右侧 div 与左侧重叠。问题出在左边的 div 宽度上。

它是 40%，一旦您的浏览器变得太窄，它就会开始变得小于图像。

如果您将 min-width:780px 添加到左侧的 div 中，它将起作用。由于它是固定的并且具有较低的 z-index，因此您无需担心它的大小..