z-index and tooltip

Question

I am trying to use a tooltip in css, it is working, but I have a problem when the tooltips appear, because the text in the p tag its is showing over the span content "the tooltip" I want to show over all the content. Ive been trying withh z-index, also defining the position in al the tags, but cant understand why it is not working. I would apreciate any tip about how can I solve it.

I have the next html structure

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

And the 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;
}

I have loadded to Fiddle, so you can see it, just hover in any of the three first links and you will see that cant see all the content of the divs. http://jsfiddle.net/mtzcq/3/

Thank you very much

Answer 1

Remove the z-index from a.tooltip, and a.tooltip p.

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

That worked for me in Firefox for Mac