显示CSS内容高于其他所有内容

Question

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

我已尝试过几十种变体，到目前为止还没有任何方法可以解决这个问题。任何人都可以提供有关如何解决这个问题的见解吗？

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：

<span data-tooltip='Tool Tip'><img src='http://www.economicmodeling.com/wp-content/uploads/Info-icon.jpg' width=12px height=12px></span>

Answer 1

使用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;
}

MDN Docs