5

一般的に、HTMLレイアウトはフローベースです。各要素は、その前の要素の後ろ、つまりその右側または下に配置されます。もちろん、スタイルで遊ぶことで得られる例外はたくさんありますが、それでも、何かの順序を変更すると、ほとんどのものがその周りを「流れ」、そのためのスペースを作ります。

しかし、画面の中央に浮かぶ「ダイアログボックス」が表示され、親となるdivのサイズに制約されず、移動しないページなど、動作が大きく異なるものを時々目にします。それらの周りの他のレイアウト要素。

私は似たようなことをする方法を見つけようとしていますが、まったく同じではありません。グリッドを表示するために使用しているテーブルがあり（実際にはテーブルを正しく使用しています）、グリッドセルの1つの上に画像を配置したいと思います。セルよりも大きく、グリッドを伸ばしたくないので、セルに入れることはできませんが、ブラウザウィンドウがスクロールしても、グリッドに対して常に同じ位置に表示したいです。またはサイズ変更されます。

私はこれを行うことができる何らかの方法がなければならないと思います。セルの1つにIDまたはクラスを配置した場合、それが属するセルの一部ではない、またはセルの一部ではないが、何も移動したりレイアウトに影響を与えたりすることなく、常にそのセルの上に配置される<TD>を作成するにはどうすればよいですか。？<Image><TD><TABLE><TD>

4

3 に答える 3

2

CJGreenとNapoluxの両方の提案を拡張するために、画像をテーブルセルに配置することもできますが、絶対に配置してください。

[編集]テーブルセルの位置を定義することはおそらく違法であるため（したがってFirefoxでは無視されます）、それぞれのコンテンツを要素でラップして<td>（<div>できればJSを使用して、大幅な変更を行う必要がない）、<div>位置を設定できます親戚に：

CSS：

table td > div {
    position: relative;
}
table td > div img {
    position: absolute;   
    z-index: 999;
}

JS：

$(document).ready(function() {
   $("td").wrapInner('<div />'); 
});

ここで（更新された）フィドルを参照してください-http://jsfiddle.net/teddyrised/qyu3g/

于 2013-02-23T21:16:33.603 に答える
1

使用する場合

table {position:relative;}

次に、次を使用できます。

table img {
    position:absolute;
    top: #px;
    left: #px;
}

これにより、画像が含まれているテーブル内の特定の場所にオフセットされ、その周囲のテーブルの残りのフローから画像が取り出されます。

于 2013-02-23T20:47:44.500 に答える
0

私が正しく理解している場合は、offsetプロパティをと一緒に使用する必要がありますposition:absolute。

絶対位置は画像をフローから外し、オフセットはオーバーレイしたい要素（質問のTD）の位置を与えることができます。

オフセット（TDのページの左右からのピクセル数）があれば、画像を正しい位置に移動できます。

ここを見てください：http：//jsfiddle.net/jrUsM/

jQueryのドキュメントはそれを非常によく説明しています。

于 2013-02-23T20:51:16.867 に答える