検索

絶対配置に設定された要素ボックスはドキュメント フローから完全に削除され、その要素を含むブロック (ドキュメント内の別の要素または最初の要素を含むブロック) に対して相対的に配置されます。

CSS絶対配置の詳しい説明

#通常のドキュメント フローで要素が元々占めていたスペースは、要素が存在しないかのように閉じられます。この要素は、通常のフローで最初に生成されたボックスの種類に関係なく、配置後にブロック レベルのボックスを生成します。

# CSS 絶対配置 (推奨学習: css チュートリアル )

絶対配置により、要素の位置はドキュメントとは無関係になります。流れるのでスペースをとりません。これは、要素の位置が通常の流れにおけるその位置を基準とするため、実際には通常の流れ位置決めモデルの一部とみなされる相対位置決めとは異なります。

通常のフロー内の他の要素のレイアウトは、絶対に配置された要素が存在しないかのようになります:

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

以下に示すように:

CSS絶対配置の詳しい説明

CSS 絶対配置の例

絶対配置要素の位置は、最も近くに配置された祖先を基準とします。要素に位置決めされた祖先がない場合、その位置は元の包含ブロックを基準とします。

ポジショニングに関する主な問題は、それぞれのポジショニングの意味を覚えておくことです。それで、ここで学んだことを復習しましょう。相対配置はドキュメント内の要素の初期位置に「相対」しますが、絶対配置は最も近い位置にある祖先要素に「相対」します。配置された祖先要素が存在しない場合は、「に相対」します。元の包含ブロック。

注: ユーザー エージェントによっては、最初に含まれるブロックがキャンバスまたは HTML 要素になる場合があります。

ヒント: 絶対に配置されたボックスはドキュメント フローとは関係がないため、ページ上の他の要素を覆うことができます。これらのボックスの積み重ね順序は、z-index プロパティを設定することで制御できます。

rree

以上がCSS絶対配置の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
「CSS4」アップデート「CSS4」アップデートApr 11, 2025 pm 12:05 PM

私が最初にCSS4¹のことを鳴らしたので、それについてもっと多くの議論がありました。私はここで他の人から私のお気に入りの考えをまとめようとしています。がある

3種類のコード3種類のコードApr 11, 2025 pm 12:02 PM

新しいプロジェクトを開始するたびに、3つのタイプ、または必要に応じてカテゴリを検討しているコードを整理します。そして、これらのタイプは適用できると思います

HTTPSは簡単です!HTTPSは簡単です!Apr 11, 2025 am 11:51 AM

私は、httpsの複雑さを公に嘆きながら罪を犯しました。過去に、私はサードパーティのベンダーからSSL証明書を購入し、問題がありました

HTMLデータ属性ガイドHTMLデータ属性ガイドApr 11, 2025 am 11:50 AM

HTML、CSS、およびJavaScriptのデータ属性について知りたいと思っていたことはすべて。

JavaScriptの不変性を理解するJavaScriptの不変性を理解するApr 11, 2025 am 11:47 AM

JavaScriptの不変性を以前に作業したことがない場合は、変数を新しい値または再割り当てに割り当てることと混同しやすいことがわかります。

最新のCSS機能を備えたカスタムスタイリングフォーム入力最新のCSS機能を備えたカスタムスタイリングフォーム入力Apr 11, 2025 am 11:45 AM

最近、カスタムチェックボックス、ラジオボタン、トグルスイッチを構築することは完全に可能です。必要でさえありません

脚注文字脚注文字Apr 11, 2025 am 11:34 AM

脚注に最適な特別なスーパーセット番号の文字があります。ここにあります:

HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法Apr 11, 2025 am 11:29 AM

プロジェクトにカウントダウンタイマーが必要だったことはありますか?そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター