`top`、`left`、`bottom`、または `right`を設定せずに`position:absolute`を使用できますか?

Position: Absolute Without Set Top/Left/Bottom/Right?

CSS では、position: ABS プロパティを使用して、通常のドキュメント フローから要素を削除できます。 、コンテナに対して絶対相対的に配置されます。ただし、top、left、bottom、または right プロパティに明示的な値を設定せずに、position:Absolute を使用したい場合もあります。

ケース #1:

このアプローチが可能な 1 つのシナリオ同じコンテナ内の別の要素を基準にして要素を配置する場合に便利です。たとえば、以下の HTML と CSS の例に示すように、ヘッダーの写真の上にロゴを配置したい場合があります。

<a></a>

#logo {
  position: absolute;
  margin: 10px;
  /* or padding: 10px; */
  /* or border: 10px solid transparent; */
}

この例では、位置を指定せずに、position:Absolute を設定します。上の値は、写真の上マージンを基準点として使用して、ロゴを写真の 10 ピクセル上に配置します。

ケース #2:

このテクニックが役立つもう 1 つの例は、テーブルを使用する場合です。ベースのレイアウト。たとえば、コンテナの幅全体にわたる水平の複数レベルのメニューを作成したい場合があります。テーブルのセルはposition:relativeをサポートしていないため、以下に示すように、上/左/下/右の値を指定せずにposition:absoluteを使用できます。

#menu td {
  position: absolute;
  height: 100%;
  width: 100%;
}

このシナリオでは、position:absoluteプロパティが使用されます。値を追加しないと、テーブル内の各セルがテーブルの境界を基準にして配置され、シームレスに整列する絶対的なマルチレベル メニューを作成できます。

CSS 標準に従って:

一般に、 CSS 仕様では、top/bottom または left/right プロパティが auto に設定されている場合、デフォルトで要素の位置、つまり静的な値を設定する必要があると規定されています。ただし、ブラウザの実装によって、上/左/下/右の値を明示的に設定しない絶対位置のサポートが異なる場合があることに注意することが重要です。

以上が`top`、`left`、`bottom`、または `right`を設定せずに`position:absolute`を使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。