問題タブ [css-position]

コンテナー要素の下部に絶対配置要素があります。問題は、コンテナーのコンテンツが動的に変化することです (javascript)。FF ではまだ正常に動作しますが、IE7 (他はテストしていません) は、ページの読み込み時にコンテナーの上部に対する要素の位置を計算するようで、それを更新しません。

例:

そして反対：

アイデア/回避策はありますか？

私は CSS の専門家ではないので、明らかな何かを見落としている可能性があります。相対的なサイズのヘッダーとフッターを設定しようとしています (大きなモニターでは、小さな画面よりもヘッダーとフッターが大きくなるように)。これを行うために、パーセンテージの高さを使用しています。ただし、これは を に設定した場合にのみ機能positionしabsoluteます。問題は、absolute に設定すると、画面の主要部分 (ヘッダーとフッターの間) に重なってしまうことです。ヘッダー/フッター内にあるアイテムに依存しているため、相対に設定しても機能しません。これは私のヘッダーがどのように見えるかです:

ASPXページには単に含まれています

比較的比例したヘッダーとフッターを取得する方法はありますか?

ありがとう

コンテンツに関連する (固定されていない) フッターを作成したいと思いますが、画面の残りの部分を埋めます。たとえば、私の大きなモニターでは、フッターは同じ場所から始まりますが、100px いっぱいになります (たとえば)。小さいモニターでは、75px を埋めるだけで済みます。100% を使用してみましたが、ページが非常に大きくなり、ユーザーが下にスクロールして画面全体をフッターで埋めることができます。画面の下部をほぼ埋めるように、もう少し妥当なサイズにする方法はありますか? 私の現在のコードはこれです：

次の点を考慮してください。

これは次のようにレンダリングされます。

ボックス 2 はボックス 1 よりも下 http://img.skitch.com/20100512-cr58jx4p5k37n4fcm6cn8h6dde.png

ボックス 2 がボックス 1 と同じレベルにないのはなぜですか? position: absolute、no、topまたはがあるleftため、その位置に影響を与えずに通常のフローから除外されると予想されます。(CSS を変更して「問題」を修正しようとしているのではなく、ブラウザがこのボックスをこのようにレンダリングする理由を理解しようとしていることに注意してください。)

JavaScript を使用して配置する div があるため、誰かが画像の上にカーソルを合わせると、ポインターに沿ってツールヒント メッセージが表示されます。( tooltip-0.2.js を使用)

問題は、ユーザーが IE6 のページに移動すると、ページ上で無効になっているドロップダウン ボックスが、この絶対位置にあるツールチップにカーソルを合わせようとすると表示されることです。このドロップダウンリストを取得して適切な場所を知るにはどうすればよいですか? ;)

上記のパネルを使用して ui.xml ファイルのみを使用して絶対レイアウトを実行したいのですが、ドキュメントがコードに集中し、レイアウト言語を完全に無視しているため、これが可能かどうかは明確ではありません。チュートリアルではこれについて言及されていないため、不可能だと思いますが、確実に知りたいと思います。

私は 2 つのテーブル要素を持っています。どちらも位置: 絶対スタイルです。最初のテーブルはある種のレイアウトを担当し、width: 100%を持ち、2 番目のテーブルはいくつかの入力コントロールを表示し、幅: 400pxで中央に配置されます。

IE で問題が発生しました。最初のテーブルが 2 番目のテーブルをカバーしているように見えます。たとえば、マウスを使用して入力要素にフォーカスを設定できません。また、開発者ツールで遊んで、入力要素をクリックして検査しようとすると、実際に検査される要素は最初のテーブル要素です。入力要素にフォーカスを設定するには、TAB を使用する必要があります。

FF & Chrome & Opera ではすべて正常に動作します。

何が起こっているのか分かりますか？z-index で遊んでみました: 助けにはなりませんでした。

ありがとう

編集：それらはテーブルです：

表1

表 2

そして、それらのテーブルはフォーム要素で隣り合っています。DIVなどで作成する必要があるとは言わないでください... :)私はそれを知っています:)

I've done this in the past using a method similar to this: http://javascriptkit.com/javatutors/static3.shtml

but I don't like the "flicker" effect as the page is scrolled and the div needs to move with the scrolling. Lately I've seen a lot of site that have an element (a div or the like I presume) that don't move when the page is scrolled but it's seemless...they're just there and it's a beautiful thing.

Unfortunately I can't seem to recall where I've seen it lately to view the source and try to figure it out so I figured I'd turn here and see what all of you experts can provide as far as assistance / suggestions.

TIA

position:fixedページの中央に配置された div を取得しようとしています。

この「ハック」を使用して、絶対に配置されたdivで常にそれを行うことができました

...ここで、margin-left の値は div の幅の半分です。

これは、固定位置の div では機能しないようです。代わりに、左端の角を 50% にして配置し、margin-left 宣言を無視します。

これを修正して、固定配置された要素を中央揃えにする方法についてのアイデアはありますか?

また、上で概説した方法よりも、絶対位置に配置された要素を中央揃えにするより良い方法を教えていただければ、おまけの M&M を追加します。

青いボックスを赤いボックスの中央に配置するにはどうすればよいですか？青いボックスの左側が赤いボックスの真ん中にあるように見えますが、左側ではなく、青いボックス全体を中央に配置したいと思います。ボックスの寸法は一定ではありません。ボックスの寸法に関係なく位置合わせしたい。ここで遊ぶ例。ありがとう ！

HTML：

CSS：