z-index 和工具提示答案

【问题标题】：z-index and tooltipz-index 和工具提示
【发布时间】：2012-11-05 17:20:17
【问题描述】：

我正在尝试在 css 中使用工具提示，它正在工作，但是当工具提示出现时我遇到了问题，因为 p 标签中的文本显示在我想要显示的跨度内容“工具提示”上所有的内容。我一直在尝试使用 z-index，还定义了所有标签中的位置，但无法理解为什么它不起作用。我会感谢有关如何解决它的任何提示。

我有下一个 html 结构

 <div>
        <a class="tooltip">
            <p>Test1</p>
            <span>saassa</span>
        </a>
    </div>

还有 CSS：

a.tooltip {
    outline: none;
    text-decoration: none;
    border-bottom: dotted 1px blue;
    display: inline;
    position: relative;
    padding: 0;
    background: none repeat scroll 0 0 #bcd9db;
    z-index: 20;
}

a.tooltip p {
    margin-bottom: 0px;
    display: inline;
    color: #006565;
    position: relative;
    z-index: 20;
}

a.tooltip > span {
    width: 25em;
    padding: 10px 20px;
    margin-top: 20px;
    margin-left: -85px;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    position: absolute;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    color: #000000;
    background: #FBF5E6;
    border: 2px solid #CFB57C;
    z-index: 1000;
}

a.tooltip:hover > span {
    opacity: 1;
    text-decoration: none;
    visibility: visible;
    overflow: visible;
    margin-top: 50px;
    display: inline;
    margin-left: -260px;
    background: #fbf5e6;
    position: absolute;
    z-index: 100000;
}

我已加载到 Fiddle，因此您可以看到它，只需将鼠标悬停在前三个链接中的任何一个上，您就会看到无法看到 div 的所有内容。 http://jsfiddle.net/mtzcq/3/

非常感谢

【问题讨论】：

标签： html css

【解决方案1】：

从a.tooltip 和a.tooltip p 中删除z-index。

http://jsfiddle.net/mtzcq/7/

这在 Firefox for Mac 中对我有用

【讨论】：

感谢 Coopersita 这在 Fiddle 中解决了它，但在我的网站中没有。关于为什么删除这 2 个属性看起来更好的任何解释？
说实话，我不知道为什么。这个页面有一堆 z-index 的例子，与没有 z-index 的例子，并且具有不同的值：css-class.com/test/css/visformatting/layers/z-index.htm 这篇其他文章也可能有所帮助：coding.smashingmagazine.com/2009/09/15/…Suerte！
我会删除您拥有的所有 z 索引，并开始将它们添加到其他项目之上。您可能在其他地方设置了一些 z-index，这就是您的页面受到影响的原因，而不是小提琴。
我今天早上读了 Smashing Magazine 上的那一篇，但它和我的问题不一样，我读了另一篇。再次感谢您
找到了解决方案，我正在使用 Zurb Foundation。该框架使用与工具提示同名的类。所以我只是改变并解决了它。

【解决方案2】：

En el código html tienes que quitar dentro del span los H6

【讨论】：

那样你不能解决我的问题。您刚刚将 div 移出 p。
No sé como puedo darte puntos, yo soy un novato aquí y creo que no tengo puntos para dar.
No creo que Bernardao tenga los suficientes puntos como para poder votar。
Pero que quieres en si? Que no se vean los h6?
Tienes alguna etiqueta que hace conflicto tienes que ir probando con !important en algunas partes del hoover

【解决方案3】：

删除所有“Z-index”的实例，除了a.tooltip > span 中的那个

【讨论】：

这就是我拥有我的网站的方式，我再次以同样的方式设置它。只有我网站中的另一个 z-index 及其在标题上，但未显示在同一区域中。