奇怪的行为 - 身体宽度变化，div变得不透明答案

【问题标题】：Strange behaviour - body width change, div becomes opaque奇怪的行为 - 身体宽度变化，div变得不透明
【发布时间】：2013-09-21 18:48:04
【问题描述】：

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

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

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

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

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

我不知道这种行为是从哪里来的，因为我没有在边缘进行任何更改。

只需将您的浏览器缩放到 1000 像素到 1200 像素之间的宽度，然后您就会看到图像和内容之间的绿色间隙。（如果你将 tahn 1200px 放大一点，你会看到边距又是透明的）

抱歉有点难解释

【问题讨论】：

【解决方案1】：

它不会变得不透明。

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

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

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

【讨论】：