HtML Footnote appears behind an element

Question

Newbie here

I'm making a website that has 2 main sections: one larger section (section A) with 75% width, and another section (section B) with 25% width, appear side by side.

Section A has several p tags with footnote inside, the only problem is that when I hover the footnote, it appears behind the section B, can anybody help me? Thanks!

Screenshot: https://i.stack.imgur.com/IXjZG.jpg

CSS Code:

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

score 0 · Accepted Answer · answered Nov 13 '15 at 04:42

You need to add a z-index to the footnote element to make it appear to be above every other element, without the HTML I will just apply the z-index to both footnote CSS elements

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 */
}

Thank you! It worked. I will only need the -tooltip to have z-index because the -sign is just the number indicating a footnote. — Jaysung Tab, Nov 13 '15 at 04:55

score 0 · Answer 2 · answered Nov 13 '15 at 04:43

0

Add the z-index to the Footnote-tooltip

Footnote-tooltip {
z-index:100;
}

answered Nov 13 '15 at 04:43

Rajesh kannan

624
3
16

welcome.. Give the upvote if it worked. So that it'll be helpful for someone else – Rajesh kannan Nov 13 '15 at 05:17
I did, but I don't have enough reputation to make it appear publicly xD – Jaysung Tab Nov 13 '15 at 05:20

score 0 · Answer 3 · answered Nov 13 '15 at 05:12

0

If you want to achieve this without z-index then follow my pen.

Hope this pen will help you.

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

answered Nov 13 '15 at 05:12

Asif Shirazi

21
5

HtML Footnote appears behind an element

3 Answers3