Html Сноска появляется позади элемента

Question

Новичок здесь

Я делаю сайт, который имеет 2 основных раздела: один больший раздел (раздел А) с шириной 75%, а другой раздел (раздел В) с 25 % width, появляются бок о бок.

Раздел A имеет несколько p-меток со сноской внутри, единственная проблема заключается в том, что когда я нахожу сноску, она появляется за секцией B, может ли кто-нибудь мне помочь? Благодаря!

Скриншот: http://imgur.com/7BQrcP7

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

Если вы хотите, чтобы достичь этой цели без г-индекса затем следуют за перо.

Надеюсь, что это перо поможет вам.

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