明示的に上、左、下、または右のプロパティを指定せずに絶対的な位置決めを実現するにはどうすればよいでしょうか?

明示的な上/左/下/右を使用しない絶対的な配置

場合によっては、明示的な上/左/下/右を使用せずに要素を絶対的に配置する必要がある場合があります。 top、left、bottom、または right プロパティを明示的に設定します。この概念を 2 つのケースで説明します。

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

最初の例の目標は、ヘッダーの写真の上にロゴを配置することです。デフォルトのWordPressテーマのヘッダー。写真の前にロゴを追加し、空間プロパティを何も指定せずにその位置を絶対に設定すると、ロゴはそのコンテナを基準にして自動的に配置されます。これは、CSS2 仕様で概説されているデフォルトの動作により可能になります。この動作では、絶対位置の要素に対してプロパティが設定されていない場合、これらのプロパティに自動値が割り当てられます。

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

2 番目の例では、幅全体に広がり、display: table-* を使用してレイアウトされる水平方向のマルチレベル メニューの作成が含まれます。テーブルセルはposition:relativeをサポートしていないため、解決策は空間プロパティを設定せずに絶対位置を使用することです。ただし、このアプローチはすべてのブラウザおよびデバイス タイプで一貫しているわけではないため、回避策として考慮する必要があります。

自動値の標準動作

CSS2 仕様による、top/bottom および left/right プロパティが auto に設定されている場合、それらはデフォルトで非配置状態の要素の位置になります。この動作により、明示的な空間座標を必要とせずに、要素を自然な流れに対して絶対的に配置することができます。

以上が明示的に上、左、下、または右のプロパティを指定せずに絶対的な位置決めを実現するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。