0

ダウンの代わりに開くドロップダウンメニューを作成する必要がありました。これを経て、ドロップダウンを作成する方法を考え出し、要件に従って変更した結果、最終的にこれ (フィドル)になりました。

このドロップダウンをページの下部に貼り付けたいので、コンテナの css を に変更しましたposition:absolute;bottom:0;。ただし、ここに示すように、ドロップダウンが正しく表示されなくなりました。

なぜこれが起こっているのか、それを正しく行う方法を誰か説明してもらえますか?

前もって感謝します。:)

編集：

kei と bukfixart のおかげで、以下に示す両方のコードを交互に使用して同じ結果を得ました。これらは IE9 では動作しますが、Chrome または Firefox では動作しません (動作がおかしい)。ここで奇妙な動作を見ることができます。これは、4 つのタブすべてが同じ行にある場合にのみ発生することに注意してください。

なぜこれが起こっているのか誰か説明してもらえますか??

前もって感謝します。:)

4

2 に答える 2

3

デモ

jQueryで、次のように変更します

    submenu.css({
        position: 'absolute',
        top: $(this).offset().top - submenu.height() + 'px',
        left: $(this).offset().left + 'px',
        zIndex: 1000
    });

に

    submenu.css({
        position: 'absolute',
        bottom: $("#container").height() + 'px',
        left: $(this).offset().left + 'px',
        zIndex: 1000
    });
于 2012-12-21T19:47:15.907 に答える
2

これには単純な理由があります。

コードをこれに置き換える必要があります

    submenu.css({
        position: 'absolute',
        top:  - submenu.height() + 'px',
        left: $(this).offset().left + 'px',
        zIndex: 1000
    });

（親の高さを削除しました）。あなたは親に絶対的なポジショニングを与えました。したがって、子供たちは親の立場に向けられます。この場合、高さは計算に必要ありません

#container要素に常にrelativeまたは位置を指定するだけabsoluteで、すべての場合に固定スクリプトを使用できます

于 2012-12-21T19:48:56.630 に答える