Html 显示CSS内容高于一切

我发现了一个非常简单的CSS示例，用于使用

内容
设置创建自定义工具提示，它的演示看起来很棒。我采用了样式并将其实现到我自己的页面中，但是我很快注意到工具提示似乎使用最小宽度作为宽度，并且显示在其他所有内容的下方

我已经尝试了几十种变体，但到目前为止还没有解决这个问题。有人能提供如何解决这一问题的见解吗

span[data-tooltip]
{
    position: relative;
    cursor: help;
}
span[data-tooltip]:hover:after
{
    content: attr(data-tooltip);
    display: inline-block;
    position: absolute;
    top: 1em;
    right: -200%;
    background: rgba(240,240,240,1.0);
    border: 1px solid rgba(0,0,0,1.0);
    min-width: 10em;
    padding: 0.25em;
    text-shadow: none;
}


HTML:

使用
z-index
：

span[data-tooltip]:hover:after
{
    content: attr(data-tooltip);
    display: inline-block;
    position: absolute;
    top: 1em;
    right: -200%;
    background: rgba(240,240,240,1.0);
    border: 1px solid rgba(0,0,0,1.0);
    min-width: 10em;
    padding: 0.25em;
    text-shadow: none;
    z-index:99;
}

试试
z-index
css属性。为什么这个问题被标记为javascript和jquery？我对它的简单性感到愚蠢，我甚至考虑过它，但我认为它只是出于某种原因才用于图像。非常感谢你，一旦合适的时间过去，我会接受你的回答。@BrettPowell哈哈，每个人都会遇到这种情况：）z-index必须定位才能使用。
span[data-tooltip]:hover:after
{
    content: attr(data-tooltip);
    display: inline-block;
    position: absolute;
    top: 1em;
    right: -200%;
    background: rgba(240,240,240,1.0);
    border: 1px solid rgba(0,0,0,1.0);
    min-width: 10em;
    padding: 0.25em;
    text-shadow: none;
    z-index:99;
}