CSSの絶対位置を徹底分析して徹底理解！-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSの絶対位置を徹底分析して徹底理解！

青灯夜游

Sep 17, 2021 am 11:21 AM

css絶対位置決め

この記事では、CSS における絶対配置を分析し、徹底的に理解していきます。

CSSの絶対位置を徹底分析して徹底理解！

要素の位置決めは、要素自体の位置を特定することではなく、要素のコンテナーの位置を特定することです。自分自身を配置できるようにするには、どの親 div に対して相対的に配置されるかを知る必要があります。 [関連する推奨事項: 「css ビデオチュートリアル」]

次のコードは、.box-1 から .box -3## までの 4 つのネストされた div を示しています。 # センタリングを実現するには、display: flex と margin: auto のみを使用してください。 .box-4 margin は設定されておらず、ドキュメントフロー内のデフォルトの位置にあります。

<body>
  <div class="box-1">
    <div class="box-2">
      <div class="box-3">
        <div class="box-4"></div>
      </div>
    </div>
  </div>
</body>

position 属性がすべての要素に設定されていません

body {
  display: flex;
}
.box-1,
.box-2,
.box-3 {
  display: flex;
  margin: auto;
}

CSSの絶対位置を徹底分析して徹底理解！

##.box-4
デフォルトの位置
自分自身を配置するには、要素は 2 つのことを知っている必要があります:

、right、bottom, left .box-4 # を与えたとき、どの親要素を配置するかを基準にして値
##position:Absolute

.box-4

絶対位置決め時の位置オフセットはありません

CSSの絶対位置を徹底分析して徹底理解！

top を追加することで: 0
および left: 0 の場合、要素は、どの要素が配置の参照コンテナーとして機能するかを認識している必要があります。ここの要素は画面の左上隅に配置されていることがわかります。
.box-4

は、最初にその親コンテナに

position 属性セットがあるかどうかを確認します。最初に、.box-3 に位置決め属性セットがないことがわかり、その後、次のレベルの .box-2 および .box-1 に続きました。 、使用可能な position 属性を設定しているものがないことが判明しました。 結局、.box-4 は、位置決めの参照に使用できる親要素を見つけることができず、最終的には body しか使用できませんでした。位置決めの参考に。要素は最終的に画面の左上隅に配置されます:

.box-4

絶対配置。すべての親要素はそうではありません。 set

position CSSの絶対位置を徹底分析して徹底理解！プロパティ

position:相対を .box-1、
.box-4# に設定すると、 ## 利用可能な位置決め参照が見つかりました。そして最終的に

.box-1

を基準とした相対的な位置決めを達成しました: .box-4 絶対的な位置決め、

.box-1

相対位置、 CSSの絶対位置を徹底分析して徹底理解！ .box-2

および

.box-3
は変更されません。 絶対位置の要素は相対位置になります。自分自身を最も近い祖先要素に合わせて配置します。 利用可能な祖先要素が見つかると、他の要素はその要素に関連付けられなくなります (box2 や box3 など)。以下の図は、position:relative を .box-2
と

.box-3

にそれぞれ設定した場合の効果を示しています。

#.box-4

絶対配置、

.box-2 CSSの絶対位置を徹底分析して徹底理解！および

.box-3

相対位置 CSSの絶対位置を徹底分析して徹底理解！

#元のアドレス: https://juejin.cn/post/7008462323316686862
著者: M Cool 詳細については、プログラミング関連の知識については、プログラミング入門をご覧ください。！

以上がCSSの絶対位置を徹底分析して徹底理解！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は掘金--M酷で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

CSSインクルージョン：プロジェクトに適した方法を選択しますMay 16, 2025 am 12:02 AM

bestmethod forincludingcsssdependsonprojectsized complexity：1）forlargerprojects、useexternalcssssssssssssssavesainabyandperformance.2）

これは発生することは想定されていません。不可能をトラブルシューティングしますMay 15, 2025 am 10:32 AM

あなたが考えたことのない他の何かであることが判明したそれらの不可能な問題の1つをトラブルシューティングすることがどのように見えるか。

@KeyFrames対CSSトランジション：違いは何ですか？May 14, 2025 am 12:01 AM

@keyframesandcsstransitionsdifferincomplexity：@keyframesallowsfordeTailedAnimationのシーケンス、whilecsstransitionshandlesimplestatechanges.usecsstransitionsは、ButtonColorChanges、および@keyframesforintricateanimationslikerotatingingspinnnersを使用します。

静的サイトコンテンツ管理にページCMSを使用しますMay 13, 2025 am 09:24 AM

私は知っています、私は知っています：たくさんのコンテンツ管理システムオプションが利用可能であり、私はいくつかテストしましたが、実際にはY＆＃039;知っているものはありませんでしたか？奇妙な価格設定モデル、困難なカスタマイズ、一部は全体になることさえあります＆

HTMLのCSSファイルをリンクするための究極のガイドMay 13, 2025 am 12:02 AM

CSSファイルをHTMLにリンクすることは、HTMLの一部で要素を使用することで実現できます。 1）タグを使用して、ローカルCSSファイルをリンクします。 2）複数のタグを追加することにより、複数のCSSファイルを実装できます。 3）外部CSSファイルは、そのような絶対URLリンクを使用します。 4）ファイルパスとCSSファイルの読み込み順序の正しい使用を確認し、パフォーマンスを最適化すると、CSSプリプロセッサを使用してファイルをマージできます。

CSS Flexbox vsグリッド：包括的なレビューMay 12, 2025 am 12:01 AM

FlexBoxまたはグリッドの選択は、レイアウト要件によって異なります。1）FlexBoxは、ナビゲーションバーなどの1次元レイアウトに適しています。 2）グリッドは、雑誌のレイアウトなどの2次元レイアウトに適しています。この2つは、レイアウト効果を改善するためにプロジェクトで使用できます。

CSSファイルを含める方法：メソッドとベストプラクティスMay 11, 2025 am 12:02 AM

CSSファイルを含める最良の方法は、タグを使用してHTMLパーツに外部CSSファイルを導入することです。 1.タグを使用して、外部CSSファイルを導入します。 2。小さな調整のために、インラインCSSを使用できますが、注意して使用する必要があります。 3.大規模プロジェクトでは、@Importを介して他のCSSファイルをインポートするために、SASS以下などのCSSプリプロセッサを使用できます。 4。パフォーマンスのために、CSSファイルをマージし、CDNを使用し、CSSNANOなどのツールを使用して圧縮する必要があります。

FlexBox対グリッド：両方を学ぶべきですか？May 10, 2025 am 12:01 AM

はい、Youはrelearnbothlexboxandgrid.1）FlexBoxisidealforone-Dimensional、FlexiblleayoutslikenavigationMenus.2）Gridexcelsintwo-digsignssuchasmagazinelayouts.3）Bothenhanceslaysutibulivedibulisunivedivition、floctonsulururを

See all articles