css_html/css_WEB-ITnose配下のposition属性の詳細説明-htmlチュートリアル-php.cn

CSSを書いたことがある人なら必ずposition属性を扱うことになりますが、position属性を真に理解するのは簡単ではありません。 2 日前、あるブロガーは、HTML ページ上で

要素を別の

要素の右下隅に配置する効果を実現したいと考えていました。インターネットで他の人の解決策を探して実装しました。ここで最も重要なことは、position 属性と left、right、top、bottom などの属性を使用することです。その背後にある原理をより徹底的に理解するために、ブロガーはインターネットで関連情報を検索し、最終的には部分的にしか理解できなかったかもしれませんが、皆さんに共有するために書き留めておきます。

htmlにはblock要素とline要素があります。 div、p などのブロック要素は、子要素が縦に配置され、コンテンツのブロックとして表示されます。これに対して、span、strong などの要素はインライン要素と呼ばれ、その内容は行に表示されます。つまり、水平方向に拡大縮小します。

HTML で記述されたすべての要素はドキュメントストリームにロードされます。簡単に言うと、HTML のすべての要素はドキュメントストリームに上から下、左から右にロードされます。フローを作成し、Web ページをレンダリングするときに、要素はドキュメントフローの順序に従って Web ページに 1 つずつ表示されます。したがって、ドキュメントフロー内の要素は相対位置に基づいて描画されます。ただし、位置が絶対的、固定的である場合など、すべての要素がドキュメントフローに組み込まれるわけではありません。

ここで、position 属性について正式に説明しましょう。 POSITION 属性には、Relative、Absolute、FIXED、Static の 4 つの値があります。

Static: これは、Position のデフォルト値であり、通常のドキュメントストリームに表示され、グラインドのルールに従って描画されます。 ; : 相対位置に設定されている要素は、通常の表示位置に基づいて微調整を行うこともできます。たとえば、「left: 20px」は、通常の表示位置に基づいて左側を 20 ピクセルインデントすることを意味します。

絶対: 絶対位置を持つ要素はドキュメントフローから削除され、絶対要素の描画は行われなくなります。代わりに、位置が固定されていない最初の親要素が配置範囲として使用され、左右などの属性に従って配置されます。

:位置が固定されている要素の配置ルールは、固定要素の配置範囲が親要素ではなくウィンドウ全体であることを除いて、より完全に似ています。したがって、固定に設定された要素は、ユーザーが Web ページをスクロールするときにブラウザウィンドウに対する位置を変更しません。

さて、基本的な定義は明確に説明されました。次に、ブロガー自身の実践に基づいた具体的な使用方法について説明します。

つまり、にはがあります。画像ボタンの右下隅。上で説明した知識によると、ここには 2 つの div 要素があり、そのうちの 1 つはもう一方の親要素であるはずです。

<div class="background_img" >    <img src="***" />    <div class="btn"><input type="button" /></div></div>

ログイン後にコピー

クラス btn の

は親要素に対して相対的に配置される必要があるため、その位置はは絶対であり、次に下と右で位置を設定します:

div.btn{position:absolute;right:10px;bottom:10px;}

ログイン後にコピー

クラス background_img を持つ

要素の場合、その位置要素はデフォルトの静的であることができないため、相対に設定できます:

ほんの数行の

div.background_img{position:relative;}

ログイン後にコピー

を実行するだけで、読者は自分でそれを試すことができます。