CSS 絶対配置属性分析: 絶対および固定

絶対配置は、position:Absoluteを使用する、CSS の一般的で便利なレイアウト テクノロジです。またはposition:fixed属性。通常のドキュメント フローから要素を切り離し、その要素を含む要素に対して相対的に配置できます。この記事では、絶対と固定の 2 つの絶対位置プロパティを詳細に分析し、具体的なコード例を示します。

1. position:Absolute

position:absoluteプロパティは、次の場合に、最も近い位置にある祖先要素を基準にして要素を配置します。祖先要素は配置されず、ドキュメントのルート要素を基準にして配置されます。

基本構文:

position: absolute; top: 像素值/百分比值; left: 像素值/百分比值; right: 像素值/百分比值; bottom: 像素值/百分比值;

コード例:

上記の例では、コンテナ要素.containerを作成し、配置しました。モードは次のとおりです。位置:相対に設定します。次に、コンテナ内に.box要素を作成し、その配置モードをposition:Absoluteに設定し、topおよびleftAttribute セットを渡します。その位置は、.container要素に対して 50 ピクセルです。

2. position:fixed

position:fixedこの属性は、スクロールバーは、スクロールすると位置が変わります。

基本構文:

position: fixed; top: 像素值/百分比值; left: 像素值/百分比值; right: 像素值/百分比值; bottom: 像素值/百分比值;

コード例:

 
 
固定头部
 
 
  

上記の例では、.header要素を作成し、それを Set to # として配置しました。 ##position:fixedを指定し、topプロパティとleftプロパティを使用してその位置をビューポートの左上隅に設定します。このように、.header要素は常にページの上部に表示され、スクロールの影響を受けません。

position:Absoluteとposition:fixedの使用法をマスターすると、ページ要素の位置と動作をより適切に制御できるようになります。

position:Absoluteは最も近い位置にある祖先要素を基準にして要素を配置し、position:fixedはビューポートを基準にして要素を配置します。これら 2 つの属性はフロントエンド開発で広く使用されており、さまざまなレイアウト効果を実現するのに便利です。

以上がCSS 絶対位置プロパティの分析: 絶対および固定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。