html - z-index 和工具提示

Question

我正在尝试在 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/

非常感谢

Answer 1

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

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

在 Firefox for Mac 中对我有用