Google Chrome 不尊重 z-index

发布于 2024-11-15 15:51:28 字数 214 浏览 2 评论 0原文

从标题来看，似乎只有 Chrome 不配合。请注意，无法单击屏幕左侧的表单字段。这只发生在某些页面（例如联系页面）。看起来 #left_outer div 覆盖了内容。当我通过 Firebug 或 Chrome 的开发工具编辑 css 时，它可以工作，当我编辑实际的 css 并刷新时，它不起作用。

有什么想法吗？

链接：

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅沫记忆 2024-11-22 15:51:28

通常，当您设置了 z-index 属性，但事情没有按您预期的方式工作时，它与 position 属性有关。

为了使 z-index 正常工作，需要“定位”元素。这意味着它的 position 属性必须设置为 absolute、relative 或 fixed 之一。

请注意，如果您使用 position:absolute 和 top、left、，您的元素也将相对于定位的第一个祖先进行定位>右、下等。

回复收藏 0 原文

笔落惊风雨 2024-11-22 15:51:28

如果没有可供查看的链接，就很难看出问题所在。

您是否在任何地方都有 z-index: -1; （负数是这里的关键，与数字无关）？
我过去发现这会使容器无法进行交互。

祝你好运！

回复收藏 0 原文

小…红帽 2024-11-22 15:51:28

Markt 的答案（参见第一个答案）很棒，这是 z-index 属性的“定义”。

Chrome 的具体问题通常与顶部容器底部的溢出属性有关。
因此，对于以下内容：

<div class="first-container">...</div>
<div class="second-container">
    <div ...>
         <div class="fixed-div> some text</div>
    <... /div>
</div>

和样式：

.first-container {
    position:relative;
    z-index: 100;
    width: 100%;
    height: 10%;
}

.second-container {
    position:relative;
    z-index: 1000;
    width: 100%;
    height: 90%;
    overflow: auto;
}

.fixed-div {
    position: fixed;
    z-index: 10000;
    height: 110%;
}

实际发生以下情况（仅限 Chrome，firefox 按预期工作）
“fixed-div”位于“first-container”后面，即使“fixed-div”及其容器（“second-container”）的 z-index 值都大于“first-”容器'。

原因是 Chrome 总是在强制溢出的容器内强制执行边界，即使其后继者之一可能具有固定位置。

我想你可以找到一个扭曲的逻辑......我不能 - 因为使用固定位置的唯一原因是启用“一切之上”行为。
所以错误是...

Markt's answer (see first answer) is great and this is the "by definition" of the z-index property.

Chrome's specific issue are usually related to the overflow property from the top container bottom.
So, for the following:

<div class="first-container">...</div>
<div class="second-container">
    <div ...>
         <div class="fixed-div> some text</div>
    <... /div>
</div>

And styles:

.first-container {
    position:relative;
    z-index: 100;
    width: 100%;
    height: 10%;
}

.second-container {
    position:relative;
    z-index: 1000;
    width: 100%;
    height: 90%;
    overflow: auto;
}

.fixed-div {
    position: fixed;
    z-index: 10000;
    height: 110%;
}

the following actually happens (Chrome only, firefox works as expected)
The 'fixed-div' is behind the 'first-container', even though both 'fixed-div' and its container's ('second-container') z-index value is greater than 'first-container'.

The reason for this is Chrome always enforce boundaries within a container that enforces overflow even though one of its successors might have a fixed position.

I guess you can find a twisted logic for that... I can't - since the only reason for using fixed position is to enable 'on-top-of-everything' behavior.
So bug it is...

回复收藏 0 原文

魔法少女 2024-11-22 15:51:28

我在 Chrome 上遇到了 zIndex 的奇怪问题，我一直在摆弄位置属性以查看是否有任何效果。但是，事实并非如此。事实证明，就我而言，问题出在转换属性上。因此，如果您有变换属性，请将其禁用，应该没问题。其他浏览器可以很好地处理类似的事情，但 Chrome 似乎以不同的方式处理它。

希望这对您有帮助。

回复收藏 0 原文

总以为 2024-11-22 15:51:28

Google Chrome 至 84.0.4147.135（官方版本）（64 位）2020 年 2 月 22 日。

自从我上次更新以来，CSS 元素 z-index 在 Chrome 中被破坏了。

Chrome 添加了“z-index: 1;”到 BODY 元素。

它现在错误地显示所有 z-index: ?; BODY 子元素中的值。

设置BODY的位置、z-index并不能解决问题。
更改已经正确的子元素的 z-index 值没有帮助。

我希望这个问题能够得到解决，自从我更新 Chrome 后它就被破坏了。

www.eatme.pro/music 上的 Chrome 84.0.4147.135 错误 - 屏幕小于 500 像素 - 推送播放- z-index 5 的底部栏 #lblBottomBarLink 显示在 z-index 2 的菜单下

（参见图片）

Chrome 84.0.4147.135 中的图像 eatme.pro/music，z-index 5 位于 z-index 2

回复收藏 0 原文

清醇 2024-11-22 15:51:28

我知道这个问题现已解决，但发布的解决方案对我不起作用。这是解决我的问题的方法：

<act:AutoCompleteExtender ID="ace" runat="server" OnClientShown="clientShown">
</act:AutoCompleteExtender>

<script language="javascript" type="text/javascript">
    function clientShown(ctl, args) {
        ctl._completionListElement.style.zIndex = 99999;
    }
</script>

I know this is now resolved but posted solution didn't work for me. Here is what resolved my problem:

<act:AutoCompleteExtender ID="ace" runat="server" OnClientShown="clientShown">
</act:AutoCompleteExtender>

<script language="javascript" type="text/javascript">
    function clientShown(ctl, args) {
        ctl._completionListElement.style.zIndex = 99999;
    }
</script>

回复收藏 0 原文

~没有更多了~