位置がAbsolute_html/css_WEB-ITnoseの場合について質問する-htmlチュートリアル-php.cn

ディスカッションへの返信(解決策)

ホームページ

ウェブフロントエンド

htmlチュートリアル

位置がAbsolute_html/css_WEB-ITnoseの場合について質問する

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:22 AM

図のように、絶対的と言われると、左と上が設定されていないと位置を占有しないのですが、これはどう理解すれば良いのでしょうか？
次のコードを試してみました:

<style type="text/css">    .z{      position: relative;      background-color: #00c0ef;      margin: 10px 20px 10px 20px;    }    .p{      background-color: #00a65a;      position: absolute;      width: 200px;    }</style><body>  <div class=" z">    zpc    <div class=" p">      zpc    </div>  </div></body>

ログイン後にコピー

その後、実際の効果は次のようなことがわかりました:

つまり、left と top が設定されていない場合、インライン div は外部 div に含まれません。場所を占有しませんが、この原理は一体何なのでしょうか？

ディスカッションへの返信(解決策)

このとき、.pは親要素を使用しなくなったため、.zの相対を記述してもしなくても同じです。参照要素として:

ただし、絶対配置要素に配置された祖先がない場合は、ドキュメント本体を使用し、ページのスクロールに合わせて移動します

このとき、.z の相対要素であっても同じです。 .p が親要素に基づいていないため、記述されるかどうかは関係ありません。参照要素として:

ただし、絶対位置指定された要素に位置指定された祖先がない場合は、ドキュメント本体が使用され、ページのスクロールに合わせて移動します

。
.p TRBL が設定されていないのでしょうか?

このとき、.p は書かれていないので、親を参照点として使用する必要があります。

ただし、絶対に配置された要素に配置された祖先がない場合は、ドキュメント本体が使用され、ページのスクロールに合わせて移動します

それとも、TRBL が定義されていない場合は、私が誤解しています。、ボディは参照として直接使用されますか?
そうであれば、なぜ div.p はそのようなオフセットを持っているのでしょうか? z と同じ 10px だけ左にオフセットされています。 .p は親要素を参照要素として使用しなくなったため、.z の相対要素が書き込まれます。

ただし、絶対配置された要素に配置された祖先がない場合は、ドキュメント本体が使用され、ページのスクロールとともに移動します。

それとも、TRBL が定義されていない場合は、本文を参照として直接使用しますか?
これが事実なら、なぜ div.p はそのようなオフセットを持っているのでしょうか? z と同じ 10px だけ左にオフセットされています。
絶対位置決めposition:absolute; は、その位置を占有しないことを示します。これは、後続の兄弟要素の位置決めに影響を与えなくなるためです。

これは次のように理解できます。配置されていない要素は 2 次元であり、同じ平面上にあり、互いに影響を及ぼしますが、配置されている要素は 3 次元です。

絶対配置
は実行していることと同等です。もちろん、前の平面には何の影響もありませんさらに、もちろん
相対位置決めもこの方法で理解できますが、別の平面に移動するだけでなく、より高圧的になります。ただし、元の平面上の位置もお任せします。

わかるかな？理解できたら、おめでとうございます!次に、
z-index
属性がどのような状況で機能するかについても理解する必要があります

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

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

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7700

Java チュートリアル

1640

CakePHP チュートリアル

1393

Laravel チュートリアル

1287

PHP チュートリアル

1230

Related knowledge

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。