相対と絶対を区別する_html/css_WEB-ITnose
彼らと言えば、誰もがよく知っているはずです。相対、相対位置、絶対、絶対位置。しかし、それらは一体何なのでしょうか？
w3c 定義を参照してください。以下の表を参照してください
位置 | 意味 |
相対 | 要素ボックスは特定のオフセットによってオフセットされています距離。要素は、配置されていない形状と元のスペースを保持します。 |
absolute | 要素ボックスはドキュメント フローから完全に削除され、その要素ボックスを含むブロックに対して相対的に配置されます。包含ブロックは、文書内の別の要素または最初の包含ブロックである場合があります。通常のドキュメント フローで要素が以前に占めていたスペースは、その要素が存在しないかのように閉じられます。この要素は、通常のフローで最初に生成されたボックスの種類に関係なく、配置後にブロック レベルのボックスを生成します。 |
くそー、これを言うとちょっとぼんやりしてきます。
恐れることはありません、団結は強さです、一緒に段階的に分析しましょう。
1. 相対
上記の相対の w3c 定義を考慮して、まずデモを作成しましょう。
<!DOCTYPE html> <head> <title>ttt</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin:0; padding:0; } .ourRelative { border:1px solid #FF0000; position:relative; left:-10px; } </style> </head> <body> I'm <span class="ourRelative">relative</span>,I'm over! </body></html>レンダリングは次のとおりです:
コードと組み合わせると、位置を設定することで「相対的に」 10 ピクセル左に移動したことに気づいたかどうかわかりませんが、何でしょうか?右側の空いたスペースは、右側の「、終わりました！」によって圧迫されていないことがわかります。それはどういう意味ですか？
1. 相対的に配置された要素は通常のフロー内にあります。
2. 相対的に配置された要素は、left、right、top、およびbottom 属性によって相対的にオフセットされます。要素がオフセットされても、元の要素が占めていたスペースはそのまま保持されます。
上記のコードでは、テキスト「relative」を囲むために 要素を使用していることに気づいたかどうかわかりませんが、これは何を意味するのでしょうか?
推測:position:relative は要素の表示を変更しません。
デモを書いているときに濡れてしまいましたね。
<!DOCTYPE html> <head> <title>ttt</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin:0; padding:0; } .ourRelative { /*将宽高设置为100px*/ width:100px; height:100px; border:1px solid #FF0000; position:relative; left:-10px; } </style> </head> <body> I'm <span class="ourRelative">relative</span>,I'm over! </body></html>
上記のコードにspan要素の幅と高さを追加しましたが、インライン要素の効果はまだ表示されています。
納得できないですか?
上記のコードを再度変更し、スパン表示をインラインブロックに変更したまま、幅と高さは 100 ピクセルに設定されているため、このように表示されます。
<!DOCTYPE html> <head> <title>ttt</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin:0; padding:0; } .ourRelative { /*将元素的span变为inline-block*/ display:inline-block; width:100px; height:100px; border:1px solid #FF0000; position:relative; left:-10px; } </style> </head> <body> I'm <span class="ourRelative">relative</span>,I'm over! </body></html>
position:relative は要素の表示を変更しないことを説明してください。
2. Absolute
上記の w3c の絶対の定義を考慮して、デモも書いてみましょう。図 1 の を絶対位置 (position:absolute) に変更するだけです。
<!DOCTYPE html> <head> <title>ttt</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin:0; padding:0; } .ourRelative { border:1px solid #FF0000; /*将position改为absolute*/ position:absolute; left:-10px; } </style> </head> <body> I'm <span class="ourRelative">relative</span>,I'm over! </body></html>
なんてことだ、これは一体何だ。どうして。ちょっと待って、測定して何が起こっているのか見てみましょう。以下の図を参照してください。
図 1 は、span 要素全体の幅を示しており、80 ピクセルであることがわかります。要素の幅（可能な限り）ほら、70 ピクセルです。
したがって、絶対的な位置決め、ここでは体の左上隅に基づいています。
なぜですか?
絶対配置では、left、right、top、bottom 属性を使用して、最も多くの配置設定で最も近い親オブジェクトを基準とした絶対配置が実行されるため、オブジェクトの親が配置属性を設定していない場合、そのためです。 HTML の配置ルールに従う場合は、body オブジェクトの左上隅を基準に配置されます。ここにはspan要素が1つしかなく、その親要素がbodyであるためです。だからこそこのパターンが現れるのです。
そして、w3cが言ったように、絶対配置はドキュメントフローから分離されているため、絶対配置要素「,I'm over!」の右側のテキストは、それが存在しないかのように扱われ、その位置を占めます。
ねえ、相対配置では要素の表示は変わりませんが、絶対配置ではどうなるでしょうか?絶対配置により要素の表示が変更されます。それらをブロック (ブロックレベル要素のモード) に統合します。
信じられないですか?次に、上記の絶対位置コードを一緒に改良して、span 要素の幅と高さをそれぞれ 100 ピクセルに設定しましょう。
<!DOCTYPE html> <head> <title>ttt</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin:0; padding:0; } .ourRelative { border:1px solid #FF0000; /*将position改为absolute*/ position:absolute; /*为absolute添加width和height*/ width:100px; height:100px; left:-10px; } </style> </head> <body> I'm <span class="ourRelative">relative</span>,I'm over! </body></html>レンダリングを以下に示します。
くそー、絶対配置は非常にクールなようです。要素の表示を直接変更し、要素をブロックに統合します。
セクション:
1. 絶対配置後の要素はドキュメント フローから外れ、元のスペースは存在しません。
2. 絶対配置後の要素。オブジェクトの親が位置属性を設定していない場合、つまり HTML 位置規則に従っている場合、位置は本文オブジェクトの左上隅に基づいて決定されます。参考として;
3. 絶対配置された要素の場合、要素の表示はブロックに変更されます。もう 1 つ:
要素が相対位置に設定されているか絶対位置に設定されているかに関係なく、他の要素の内容もカバーされます。これは何を意味しますか?
position:absoluteを例に挙げます
<!DOCTYPE html> <head> <title>ttt</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin:0; padding:0; } .normal { width:100px; height:100px; background:#FFC0CB; } .ourAbsolute { width:70px; height:70px; position:absolute; background:#008000; left:0; top:0; } </style> </head> <body> <div class="normal"></div> <div class="ourAbsolute"></div> </body></html>下の写真をご覧ください
緑色のボックスを絶対位置に設定し、上と左の両方が0になります。次に、本体から開始してピンクのボックスを覆います。絶対に配置された緑色のボックスをピンクのボックスで覆いたい場合はどうすればよいですか?これは非常に簡単で、絶対位置の z-index を 0 に設定するだけで機能します。
相対的な位置を設定するためにコードを自分で変更してテストしてください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7533
15
1379
52
82
11
21
86
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
