z索引和工具提示

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/

在Mac上的Firefox中对我有用

Answer 2

En ElCódigoHTML Tiennes Qu quitar Dentro del Spa los H6

Answer 3

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