0

初心者はこちら

2 つのメイン セクションがある Web サイトを作成しています。幅 75% の大きなセクション (セクション A) と幅 25% の別のセクション (セクション B) が並んで表示されます。

セクション 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;
}
4

3 に答える 3

0

z-index脚注要素にa を追加して、他のすべての要素の上に表示されるようにする必要があります。I HTMLwill just apply the the z-indexboth footnote CSSelements

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 */
}
于 2015-11-13T04:42:11.520 に答える