css - 在将浏览器调整为较小尺寸时需要知道如何修复 z-index

Question

我希望有人可以帮助解决我的问题。当我在桌面窗口中使用 Z-index 时，每个图像或滑块都会与它的外观重叠。当我将浏览器的大小调整到移动设备的分辨率时，它会破坏 Z-index，所以我看到的是我的图像，其中有间距。先感谢您。

Answer 1

使用桌面大小的浏览器窗口在 chrome 中打开您的页面，右键单击其中一个图像，单击inspect element，搜索任何z-indexcss 规则（在窗口的右侧），找到确定 的任何规则，z-index然后调整大小窗口大小与手机大小相同。您将通过这种方式找到规则决定的方式，z-index并且您将能够解决您的问题。

Answer 2

我想提醒您 z-index 仅适用于显式定位的 HTML 元素，例如：

position:absolute;
position:fixed;
position:relative;

希望这会有所帮助。

Answer 3

父容器应位于：

position: absolute;

而具有 z-index 的元素应位于：

position: relative;

您还可以添加位置：

position: relative;
top: 1em;
right: 1em;

Answer 4

我的猜测是，如果它在桌面上运行良好，它与 z-index 没有任何关系。它可以是字面上的任何东西。但是 z-index 可能不是问题，因为 z-index 不会随窗口大小而变化。

了解 z-index 唯一重要的是您可以对它们进行分组。并且不透明度实际上也在创建一个 z-index 组。因此，如果您正在更改元素的不透明度，z-index 可能会发生变化，并且某些元素可能具有不同的渲染顺序。

也就是说，如果您有填充或媒体查询会更改 css 中的某些值。（响应式 css）然后有可能在较小的窗口大小下，有一个 css 查询将修改填充甚至不透明度甚至 Z-index！但谁知道你的问题是什么。