問題タブ [css-position]

ねえ、私は絶対にポジショニングしている画像を持っていて、Firefoxでは完璧に機能しますが、サファリのまったく別の場所で、絶対ポジショニングを使用せずに（別の画像の上に）好きな場所に配置する他の方法はありますか？私はすでにマージンとパディングを試しましたが、それは機能しません

ページ レイアウトと絶対配置のパディングとマージンの使用について、フィードバックが欲しいです。いずれかまたは両方が優先されるシナリオがあり、シナリオによって異なることを認識しています。

しかし、私が得ているのは、ピクセルパーフェクトデザインの全体的なページレイアウトです。一般的な経験則は何ですか? 私は HTML と CSS に 1 年強の経験があり、グラフィック デザインのバックグラウンドを持っているので、最初にレイアウトの観点からデザインにアプローチすることに重点を置いています。これまでの私の Web デザインでは、経験則を使用して、ページをレイアウトするときに適切なタイトルの div を使用し、フロート、パディング、およびマージンを使用してきました。 a div) 必要に応じて使用します。

しかし最近、私は本当にページ レイアウトへのアプローチを再考し始めており、一般的な経験則として絶対配置を使用することから始める方が良い考えではないかと考えています。

どなたか、このトピックに関する優れた記事やリソースを教えていただけないでしょうか。皆さんの個人的なフィードバックもぜひお聞きしたいと思います。

イライラするが、IE8 で一見ランダムなレンダリング バグに遭遇しました。ページ上にいくつかの絶対配置要素があり (ページ本体に関連して配置されています)、その表示は jQuery によって切り替えられます。

10 回中 8 回は要素が正しくレンダリングされますが、配置が守られず、単にブラウザ ウィンドウの左上隅に配置されることがあります (事実上、上 0、左 0 に絶対配置されます)。

IE Developer Toolbar で要素のプロパティを見ると、正しい css プロパティが設定されていることがわかりますが、適用されていません。ブラウザー ウィンドウのサイズを変更すると、要素が正しい位置にジャンプするため、本物のレンダリング バグのように見えます。

ページに正しい DOCTYPE を設定しているため、ブラウザは互換モードではありません。

どうすればこれに対抗できるか、または他の誰かが同様の経験をしたことがありますか?

Javascript 以外で次のことを行う方法を考えられる人はいますか。

• 画面のどこかに DIV 要素があります。その位置は予測できません。
• 固定幅で、ドキュメント内の他のすべてのコンテンツと重なる必要があります。「位置」が「絶対」に設定されています。
• これがキャッチです: DIV の下端をViewportの下部に接着したいのです。要素に「bottom: 0px」を指定しようとしましたが、「高さ」の設定がない場合、DIV 全体が下隅に移動します。これは私が望むものではありません。ドキュメント内のランダムな位置からビューポートの下端まで伸ばしたいです。

JavaScript を使用しないと解決策が見えませんが、誰かが素晴らしいアイデアを持っているかもしれません。

私は持っている：

firefox と safari で私の好みに合わせて動作します。主に別の要素に対してフロートしますが、それに対してオフセットします。フロートに使用できることはわかっていますmargin-top:50pxが、何らかの理由で top の方がセマンティックに意味があります。

[設定の編集]ボタンを追加したい次のリストアイテムがあります。

jQueryを使用して、リストアイテムにスパンを追加します。

リストアイテムは静的に配置されており、ページを出力して手動でリストアイテムにスパンを含めると、適切に配置されます。しかし、jQueryを使用して追加すると、ページの右上隅のリストアイテムの外側に表示されます。

私は明らかにここで何かが欠けているので、誰かがアイデアを持っているなら、それは大いにありがたいです。

ありがとうございました、

クリスハンプトン

Webコーディネーター

コロラド州立大学

編集：

私はこれでうまくいくと思いました（そしてそれでもそうかもしれません）が、私はまだ問題を抱えています。'combine the internal html'ルートを使用しましたが、リストアイテムのhtmlをコンソールに書き込むと、正しく表示されます（ページの読み込み時にサーバーコードから出力されるものと一致します）。

これがアイテムのCSSです

.draggableBucketItemクラスの位置は次のとおりです。それに適用されます。

通常のCSSで要素をその前の要素に対して相対的に配置したいのですが、最初に配置されると、その位置はその前の要素から独立したものになります。

たとえば、サイドバーの「ウィジェット」をクリックすると、それが折りたたまれ、その下にあるすべての「ウィジェット」が上に移動します。私は彼らを動かしたくありません。ありがとう。

これはここでの私の最初の質問ですが、他にもたくさんあると確信しています。達成できるかどうか知りたい小さな位置の問題があります。

フロートされた sを含む順序付けられていないリスト ( <ul>) が<li>あります。メインのオプションについてはこれらを左にフロートし、連絡先とサポートのオプションについては右にフロートします。これで、水平リストの下に表示される<span>それぞれの内部ができました。リストはメニュー用です。<li>これら<span>はメニュー選択の説明として機能し、通常のオプションについては、position:absolute; top:30px; left:0;これを疑わしいように使用します。ここで、右にフロートするメニュー項目の位置属性を変更して、スパンが取得position:absolute; top:30px; right:0;され、これがまったく機能しないようにしたいと考えています。これをより具体的なCSSルールで変更することは不可能のようですが、フロートはうまく機能します。

html:

CSS:

css の最後の行に違いはありません。誰かが答えや回避策を持っているなら、私は助けに大いに感謝します.

質問に回答し、問題を解決しました。James Arons または mercator の投稿を確認してください。

私の絶対ポジショニングをIE6で想定されているようにレンダリングするためのハックはありますか？

Safari、Firefox などでは意図したとおりに動作しますが、IE6 ではポジショニングや z-index を読み取っていません。IE6で必要なようにレイアウトするにはどうすればよいですか?

CSSは次のとおりです。