明示的な上、左、下、右の値を指定せずに要素を完全に配置できますか?

明示的な上/左/下/右の値を絶対に使用せずに要素を配置する: 標準の詳細

Web 開発の領域では、絶対配置を使用すると、要素をドキュメント内の通常の流れから独立して配置できます。ただし、top/left/bottom/right プロパティを明示的に設定せずにこれを実現しようとすると、一般的な疑問が生じます。

自動値のデフォルト動作

によるとCSS2 仕様では、上/下、左/右プロパティの auto 値のデフォルトの動作では、静的位置と同じ値が割り当てられます。これは、position:Absolute および 4 つの auto 値すべてを持つ要素が、静的に配置されているかのように動作することを意味します。

ケース #1: WordPress ヘッダーの写真の上のロゴ

最初のケースでは、ロゴ要素が親コンテナ (ヘッダー) の最初の子であるため、明示的な上/左/下/右の値を指定せずにロゴを写真の絶対上に配置することが可能です。 CSS 標準に記載されているように、マージン (またはパディング) を付けて絶対的に配置された最初の子は、親の左上隅に関連して移動されます。

ケース #2: 水平マルチレベル メニュー

2 番目のケースでは、水平マルチレベル メニューは display: table-* を使用してレイアウトできますが、テーブル セルは相対位置をサポートしません。ただし、メニュー項目でposition:Absoluteを使用し、top/bottom、left/rightプロパティをautoのままにすると、デフォルトの動作により、これらの項目が静的位置値に従って配置され、テーブルセル内の相対位置を効果的にエミュレートします。 context.

ブラウザの互換性

この手法は CSS2 仕様に準拠しており、理論的には機能するはずですが、ブラウザは明示的なトップなしの絶対位置をサポートしていることに注意することが重要です。 /left/bottom/right の値は異なる場合があります。 Firefox 0.8 や IE6-7 などの一部の古いブラウザでは、予期しない動作が発生する可能性があります。それでも、特定の状況で柔軟性を提供できる有効なアプローチであることに変わりはありません。

以上が明示的な上、左、下、右の値を指定せずに要素を完全に配置できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。