div+css Web レイアウト デザインの新たな始まり (10)
相対配置について話しましょう
相対配置に設定された要素フレームは、一定の距離だけオフセットされます。要素は、配置されていない形状と元のスペースを保持します。
簡単に言えば、相対配置はそれ自体に基づいており、その座標点は自身の div の左上隅です
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
} #b{
width:100px;
height:100px;
border:soild;
background:green;
position: relative;
left:500px;
top: 20px; }
</style>
<head>
<body>
<div id="a">
<div id="b"></div> </div>
</body>
</html>
相対配置はそれ自体に基づいており、親によって制約されないことがわかりますdiv.
彼の前職はどこだったのかと疑問に思う人もいるかもしれません。そして、それ自体の位置に従ってposition:relativeを削除する方法は、親レイヤーが絶対位置または相対位置を定義している場合はどうなりますか?
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:50px;
position: relative; } #b{
width:100px;
height:100px;
border:soild;
background:green;
position: relative;
left:500px;
top: 20px; }
</style>
<head>
<body>
<div id="a">
<div id="b"></div> </div>
</body>
</html>変化がないことがわかります
つまり、親レイヤーが通常のdivであっても、フローティングであっても、絶対配置であっても、相対配置であっても、相対配置はそれ自身の動きに影響を与えず、その動きに基づいて移動するだけです。左上隅の座標点 この点は独立しています ただし、親レイヤーの変更は元の位置の左上隅に基づいて移動し、その後新しい位置に移動します。移動すると、対応する移動も行われます
相対的に配置された div が通常の div に遭遇したとき
#c{
width:100px;
height:100px;
border:soild;
background:red;
}
#b{
width:100px;
height:100px;
border:soild;
background:green;
position: relative; }
</style>
<head>
<body>
<div id="a">
<div id="c"></div>
<div id="b"></div> </div>
</body>
</html> 緑色が相対的に配置された div であることがわかります (つまり、上、左)。相対的に配置された div は定義されていませんが、地面のフロー パターンに従うことは変わりません。通常の div のようにフローティング div を見ることができないので、赤い領域に移動します
座標を定義すると
#b{
width:100px;
height:100px;
border:soild;
background:green;
position: relative;
top:-20px: /*向上移动，同样left有负值就是向左移动*/
left:20px;
}赤い領域をカバーできることがわかります。絶対位置決めと同じです
つまり、座標が定義される前は、通常の div と同じように離陸しません
ここでさらに詳しく述べますと、絶対位置が最初に座標を定義していない場合は、ブラウザの左上隅または親レイヤーの左上隅 (絶対位置または相対位置を定義するため) になり、常に空中になります。は地上の領域を占有しません
そして、相対位置は離陸後の絶対位置と同じで、流れに従わずに空中を自由に移動することができます。ただ、それらが取る座標の開始点が異なります。ただし、離陸しない相対位置決めは、地上のエリアを占有して流れに従うだけです
離陸後は、元のエリア(つまり離陸前の位置)を保持する必要があり、占有されません。通常の div とフローティング div です
つまり、離陸するときに、Web ページに次のように指示します。「離陸後、元の位置が空であることがわかります。他のレイヤーに占有させないでください。」
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:20px; }
#c{
width:100px;
height:100px;
border:soild;
background:red;
}
#b{
width:100px;
height:100px;
border:soild;
background:green;
position: relative;
top:200px;
left:100px;
}
</style>
<head>
<body>
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>緑は相対配置 div で、赤は通常の div です。ここで、緑がアクティブであっても、下に移動すると、赤がその領域を占有しないことがわかります
相対配置が相対配置に遭遇した場合
<html>
<head>
<style type="text/css">
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
margin-left:20px;
position: relative; }
#c{
width:100px;
height:100px;
border:soild;
background:red;
position: relative;
}
#b{
width:100px;
height:100px;
border:soild;
background:green;
position: relative;
top:20px;
left:10px;
}
</style>
<head>
<body>
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html> (相対的な位置は常に空中にあり、それが占める領域は地面と同期しているという別の理解もあります。つまり、地上の div はその下を実行できませんが、フロー モードのルールに従わなければならないという条件があります。どちらが分かりやすいと思いますか？相対位置と絶対位置に違いはありません。座標の開始点が異なるだけです
Z インデックスを使用して重なり順を設定することもできます。相対位置と相対位置が遭遇した場合も同じです
お話しますこの設定によると、左上
は実際には非常に単純で、1つの位置に固定され、ブラウザ（スクロールバー）はどのように動かしても動きません
先頭に戻ると固定位置です
position属性値の意味:
static (デフォルトはこれです)
要素ボックスは正常に生成されます。ブロックレベル要素はドキュメント フローの一部として長方形のボックスを作成し、インライン要素は親要素内に配置される 1 つ以上のライン ボックスを作成します。
相対
要素ボックスは一定の距離だけオフセットされます。要素は、配置されていない形状と元のスペースを保持します。
絶対
要素ボックスはドキュメント フローから完全に削除され、そのボックスを含むブロックに対して相対的に配置されます。包含ブロックは、文書内の別の要素または最初の包含ブロックである場合があります。通常のドキュメント フローで要素が以前に占めていたスペースは、その要素が存在しないかのように閉じられます。この要素は、通常のフローで最初に生成されたボックスの種類に関係なく、配置後にブロック レベルのボックスを生成します。
修正済み
要素ボックスは位置を絶対に設定するように動作しますが、その要素ボックスを含むブロックはウィンドウ自体です。
以下は概要です
通常の div - 地面は地面の流れモードに従います
浮動 div - 空気は空気の流れモードに従い、すべて同じ高さです
位置決め div - 空気は流れモードに従いません、それらはフローティング div より高く、すべて同じ高さではありません
ページ レイアウトでは、通常、大きなボックス (最も親レイヤー) は相対的な位置として定義されますが、フロー モードに従うことができるように、座標は指定されません。 、センタリングは非常に便利ですが、大きなボックスは絶対位置決めを使用するため、大きなフレームの移動に合わせて移動できます
ただし、位置決めを使用する必要はありません。必要に応じてマージンを使用できますが、これは絶対に便利ではありません。絶対位置と相対位置
Web ページのレイアウトの開発
テーブルの位置 ---マージン位置 ---絶対位置と相対位置と固定位置
さて、最も重要なことについての話はほぼ終わりました。次に、いくつかの写真を撮ります。参考
上記は、div+css Web レイアウト デザインの新たな始まりです (10) 関連コンテンツについては、PHP 中国語 Web サイト (www.php.ん）！
ホット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）
ホットトピック
7333
9
1627
14
1351
46
1264
25
1209
29
スクリーンリーダーの分解：アクセス可能なフォームとベストプラクティス
Mar 08, 2025 am 09:45 AM
これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理：Focus-Visible」をご覧ください。で
Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する
Mar 07, 2025 am 11:33 AM
このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています（注：使用できなくなりました）。 フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。
WordPressブロックと要素にボックスシャドウを追加します
Mar 09, 2025 pm 12:53 PM
CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。
満足している属性を持つインラインテキストエディターを作成します
Mar 02, 2025 am 09:03 AM
インラインテキストエディターの構築は些細なものではありません。 このプロセスは、ターゲット要素を編集可能にすることから始まり、その過程で潜在的なSyntaxerrorの例外を処理します。 エディターの作成 このエディターを構築するには、コンテンツを動的に変更する必要があります
GraphQLキャッシングの使用
Mar 19, 2025 am 09:36 AM
最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または
最初のカスタムSvelteトランジションを作成します
Mar 15, 2025 am 11:08 AM
Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。
5つの最高のPHPフォームビルダー（および3つの無料スクリプト）を比較する
Mar 04, 2025 am 10:22 AM
この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。 特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム
node.jsとexpressのMulterを使用してファイルアップロードします
Mar 02, 2025 am 09:15 AM
このチュートリアルは、node.js、Express、およびMulterを使用してファイルアップロードシステムを構築することをガイドします。 単一および複数のファイルのアップロードをカバーし、後で検索するためにMongoDBデータベースに画像を保存することさえ示します。 まず、プロジェックをセットアップします
