web-dev-qa-db-ja.com

スクロールと絶対位置のコンテンツを含むDiv

スタイル付きの「div」があります：overflow-y: scroll; overflow-x: auto;この「div」内に絶対位置または相対位置で画像を動的に追加しようとしています。ユーザーが「div」コンテンツをスクロールしようとするまで、すべては問題ないように見えます。画像はブラウザウィンドウに対して固定位置にとどまります。この問題はIE（7）のみにあるようで、firefoxではすべて問題ありません。これに対する解決策はありますか？

編集（下記の質問に答えて）：別の要素の前に表示する必要があるため、要素を配置しています。

javascripthtmlcssinternet-explorer
32
Eduard

IEのバグなのか「機能」なのかはわかりませんが、以前に同じことを経験しました。幸いなことに、簡単な修正があります。 「position:relative "に<div>スクロール可能なコンテンツがあります。

95
Prestaul

ページに相対的に配置されているdivですべてをラップします。

<div style="display:block; position:relative; width:200px; height:200px; margin:0; padding:0;">
    <br />
    <img src="_foo_.gif" style="position:absolute; top:0; left:0; z-index:100;" />
    <br />
    <div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px; z-index:10; display:block; position:relative;">
        <br />[scrolling content]<br />
    </div>
    <br />
</div>
10
inkdeep

画像の位置を設定する必要がある特別な理由はありますか？ IE7では、位置を設定しなくても正常に機能します。

<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px;"><img src=xxx.gif" width="200" height="250" /></div>
2
Jared

float:leftまたはfloat:rightでmarginを試してください

chrome with position:absolute in overflow-y: auto;で同じ問題が発生しました。divはスクロール中にそこの位置で修正されていました。

そして、簡単な解決策はフロートを使用することです。

私の古いコードは

position:absolute; right:10px;

そして、私は次のものに置き換えて、それは働いた-

float:right; margin-right:10px;
1
Avi C

スクロールできるようにする場合は、相対配置を使用する必要があります。秘Theは、2番目の要素に負の位置を使用することです。

2つの要素AとBがあり、BをAの前に配置するとします。次のようになります。

<div id="A" style="position:relative; width:300px; height=240px;">Element A</div>

<div id="B" style="position:relative; width:300px; height=240px; top:-240px;">Element B</div>

コンテンツによっては、「display：block;」などのスタイルを追加する必要があります。など。これらの優れたリソースはw3schools.comです。

CSSを使用したDIVポジショニングに関する優れたチュートリアルについては、次を参照してください。

http://www.barelyfitz.com/screencast/html-training/css/positioning/

乾杯

0
Will

絶対配置された要素を比較的配置されたコンテナ要素にラップする方が簡単かもしれませんが、スクロールできるはずです...

0
Will

私が苦労して学んだこと：IE6/IE7の場合、スクロールするDIVの上に表示されるようにするには、含まれるDIVの最後のDOM要素として画像が必要になる場合があります。

0
inkdeep