1

スタック オーバーフローに関する最初の質問です。かなり単純なものを機能させようとしているのですが、かなり明白なものが欠けていると確信しています。まだ「標準」の CSS に慣れていないため、機能しない CSS を何年も使用しています。へー。

だから、私がやっていることのサンプル:

<div style="overflow: auto; border: 1px solid">
    hello
    <div style="position: relative; z-index: 99999; top: 0px; left: 0px;">
        <div style="z-index: 99999; overflow-y: hidden; position: absolute; overflow: hidden; height: 200px; left: 0; auto: 0">
            <ul>
                <li >New</li>
                <li >Old</li>
            </ul>
        </div>
    </div>
</div>

本質的に: 最初の div はコンテナーであり、コンテンツが追加されると自動的にオーバーフローしたいと考えています。そのコンテナー内にはポップアップ メニューがあり、ここでは単純化しています。ポップアップ メニューは、"hello" のすぐ下に表示されます (そうあるべきです)。

ただし、私の問題は、絶対位置で予想されるように、ポップアップメニューが親から「出てくる」のではなく、実際に親にスクロールバーが表示されることです。

「位置：相対」を使用すると機能することはわかっていますが、必要な場所（前の要素の真下）に表示されなくなります。

ここで何が欠けていますか？

編集:サンプルはこちら: http://marcos.metx.net/OverflowTest.htm

4

2 に答える 2

1

position: absoluteその中間のdivの代わりに使用relativeすると、問題が解決します。これにより、（最も内側の div に境界線の色が追加されて）次のようになります。

代替テキスト http://img.skitch.com/20100211-x8mnu5ds4expphbdbg956cuj6ea.png

そして、更新されたソースコードは次のとおりです。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    </head>
    <body>
        <div style="overflow: auto; border: 1px solid">
            hello
            <div style="position: absolute; z-index: 99999">
                <div style="z-index: 99999; overflow-y: hidden; position: absolute; 
                        overflow: hidden; height: 200px; left: 0; auto: 0;
                        border: 1px solid red">
                    <ul>
                        <li >New</li>
                        <li >Old</li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

詳細については、overflow: auto または hidden を使用したボックス内の絶対配置ボックスを参照してください。

于 2010-02-11T18:45:19.363 に答える
1

まず第一に - インライン スタイルは大したことではありません。

スタイル シートを含めて、"id" または "class" 属性を介して個々の div に適用することをお勧めします。

w3schoolsで標準準拠の CSS を読んでください。

問題はオーバーフロー プロパティです。

auto - 「オーバーフローがクリップされた場合、残りのコンテンツを表示するためにスクロール バーを追加する必要があります」

あなたが探しているのは「overflow: visible;」です。

于 2010-01-28T15:56:28.200 に答える