2011-03-14 25 views
4

divのpositionプロパティを固定したCSSスタイルを使用したいと考えています。この特定のdivは、テキストを含む別のdivの内部に配置されます。しかし、CSSの位置proverty fixedを持つdivは、テキストの上部に行きます。そのテキストはそのdivの下に隠れてしまいます。私は、テキストdivとイメージdivを互いに整列させる必要があります。テキストがそのイメージの周りを回り、何もイメージの下に隠れることはありません。CSSの位置固定

<html> 
<head> 
<style type="text/css"> 
    .newspaper 
    { 
     -moz-column-count:3; /* Firefox */ 
     -webkit-column-count:3; /* Safari and Chrome */ 
     column-count:3; 
     -webkit-column-width:100px; 
     column-width:100px; 
    } 
    </style> 
    </head> 
<body> 

    <p><b>Note:</b> Internet Explorer and Opera do not support the column-count property.</p> 
    <div class="newspaper" > 
    <div class="changeFont" style='font-size:18px;'> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
     aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
    </div> 

    <div style="float: right; position:fixed; left:170px;top:80px;display:inline-table;"> 
    <img id="imageTable" width="280" height="80" src="http://www.google.co.in/logos/2011/alamara11-hp.jpg"/> 
    </div> 

    <div class="changeFont" style='font-size:18px;'> 
     ullamcorper suscipit lobortis nisl ut aliquip 
     ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore 
     eu feugiat nulla facilisis at 9999999999999999 
     111111111111111 vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
     duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod 
     mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. 
     Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. 
    </div> 


</body> 
</html> 
+2

いくつかのコードを投稿してください – amosrivera

+1

ユーザーがスクロールしたときにテキストを再ラップしますか?起こらないだろう。 – Marcel

+4

あなたは「位置:固定」という意味を誤解しています。これは、スクロールした位置に関係なく、「div」の位置がビューポート内で固定されていることを意味します。だから、ある方法や別の方法は常に何かに重なります。 'position:fixed'はフローの面で親からdivも削除しますが、親は固定されたdivを考慮せず、その周りのコンテンツを移動しません。代わりに 'float'を使用したのでしょうか? – Bazzz

答えて

0

あなたができること - 第2のdivでCSS位置でも再生できます。 z-indexを使用します。またはz-インデックス:-1;

cssのz-indexプロパティを確認してください。 z-indexはあるオブジェクトを他のオブジェクトの上に置くのに役立ちます。したがって、1番目のdivがz-indexの場合:1; 2番目はz-インデックス:2;第2のものは第1のものの上に浮かぶ。それは絶対的な位置決めを必要とする。詳細については、マニュアルを参照してください。

あなたが他の質問がある場合は - 私に尋ねる;)

0

あなたは画像の周囲にテキストをラップするために何ができる唯一のことは、画像をフロートすることです。しかし、この方法では、イメージはテキストの左または右にのみ表示され、ユーザーが定義した位置には表示されません。ここhttp://jsfiddle.net/e5LQS/

ルックテキストがその周りに折り返されますようにあなたは、あなたがいずれかの列にしたい画像を入れて、テキストの多くの列を作ることができます。しかし、テキストを2つの列や行の真ん中に置くことはできません。なぜなら、それはイメージの絶対位置を持つことを意味し、テキストはそれを考慮せず単にイメージを無視するからです。