占位符 z-index Firefox 问题

Posted 2023-03-05

【中文标题】占位符 z-index Firefox 问题

【英文标题】：Placeholder z-index firefox issue

【发布时间】：2013-03-01 07:02:09

【问题描述】：

在使用 firefox 时，我在注册输入中有占位符，注册表单上方是我的菜单，当我将鼠标悬停在下拉菜单上时，占位符出现在顶部。

我试过弄乱 z 索引，但这似乎不是问题。输入字段的所有其他部分都隐藏在下拉菜单后面，但占位符没有。

我也尝试将 z-indexes 添加到

::-webkit-input-placeholder 
::-moz-placeholder 
:-ms-input-placeholder 
input:-moz-placeholder 

但无济于事。

我希望在不借助 javascript 的情况下实现这一目标。

Jsfiddle 快速演示：http://jsfiddle.net/LLANn/1/

【问题讨论】：

可以发一下你的html+css吗？！

请贴出与问题相关的代码。理想情况下，除了问题本身的代码之外，请添加jsFiddle 问题示例。它将帮助我们帮助您。

你使用的是什么浏览器，我在 Chrome 上看起来不错。

好点，看来这只是一个火狐问题

只是另一个提示：您使用的占位符值无效。例如电子邮件输入的占位符值类似于 [e-mail] 编辑：好的，您不使用电子邮件输入，但它的值应该是用户必须填写的示例。

【参考方案1】：

将位置：相对赋予#submenu。它解决了问题。

任何 z-index 都是无用的，除非伴随着“位置”。

【参考方案2】：

我的建议可能对某人有用... 如果您的占位符元素 z-index 为 0（默认） - 设置为 #menu：

z-index: 1;

在其他情况下，#menu 中的z-index 应该至少比占位符元素多 1