HtML 脚注出现在元素后面

Question

这里是新手

我正在制作一个包含 2 个主要部分的网站：一个较大的部分（A 部分）宽度为 75%，另一个部分（B 部分）宽度为 25%，并排显示。

A部分有几个p标签，里面有脚注，唯一的问题是当我悬停脚注时，它出现在B部分后面，有人可以帮我吗？谢谢！

CSS代码：

Section A {
    margin: 0px;
    padding: 0px;
    background-color: #FAFAFA;
    float: left;
    width: 75%;
}
Section B {
    float: right;
    width: 25%;
    text-align: left;
}
Footnote-sign {
    background-color: #ffc;
    cursor: pointer;
    vertical-align: super;
    font-size: 77%;
}
Footnote-tooltip {
    background-color: #fea; 
    border: 1px solid #6b0000; 
    display: inline; 
    padding: 5px; 
    display: none; 
    position: absolute;
    font-size: 85%;
    max-width: 540px;
    text-align: left;
}

Answer 1

您需要向脚注元素添加一个 z-index 以使其显示在所有其他元素之上，如果没有 HTML 我将只将 z-index 应用于两个脚注CSS 个元素

CSS

Footnote-sign {
    background-color: #ffc;
    cursor: pointer;
    vertical-align: super;
    font-size: 77%;
    z-index: 100; /* a large number to ensure it's on top */
}
Footnote-tooltip {
    background-color: #fea; 
    border: 1px solid #6b0000; 
    display: inline; 
    padding: 5px; 
    display: none; 
    position: absolute;
    font-size: 85%;
    max-width: 540px;
    text-align: left;
    z-index: 100; /* a large number to ensure it's on top */
}

Answer 2

将 z-index 添加到脚注工具提示

Footnote-tooltip {
z-index:100;
}

Answer 3

如果你想在没有 z-index 的情况下实现这一点，那么请跟随我的笔。

希望这支笔对你有所帮助。

'http://codepen.io/anon/pen/NGeaKp'

HtML 脚注出现在元素后面

HtML Footnote appears behind an element

html

css

footnotes