CSS における位置指定の概要
|
プロパティ値 | 説明する |
---|---|
修理済み | 固定位置を設定します。 |
相対的 | 相対的な位置を設定します。 |
絶対 | 絶対位置を設定します。 |
固定ポジショニングの練習
固定配置を練習する前に、コード構造がどのようになっているかを見てみましょう。
コードブロック
<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ポジショニング</title> <スタイル> 。箱{ 幅: 100ピクセル; 高さ: 100px; 背景色: 赤; マージン: 0; パディング: 0; } div{ 幅: 200ピクセル; 高さ: 200px; 背景色:春緑; マージン: 0; パディング: 0; } </スタイル> </head> <本文> <h1 class="box"></h1> <div></div> </本文> </html>
結果プロット
ここで、 h1
要素を固定位置に設定して、上記の構造上の実践とどのように異なるかを確認し、次に固定位置の特徴のいくつかを分析します。
コードブロック
<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ポジショニング</title> <スタイル> 。箱{ 位置:固定; 幅: 100ピクセル; 高さ: 100px; 背景色: 赤; マージン: 0; パディング: 0; } div{ 幅: 200ピクセル; 高さ: 200px; 背景色:春緑; マージン: 0; パディング: 0; } </スタイル> </head> <本文> <h1 class="box"></h1> <div></div> </本文> </html>
結果プロット
固定位置決め特性は次のように分析されます。
相対的な位置の練習
相対的な配置を練習する前に、コード構造がどのようになっているかを見てみましょう。
コードブロック
<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ポジショニング</title> <スタイル> 。箱{ 幅: 400ピクセル; 高さ: 300px; 境界線: 1px 濃いオレンジ色; } .box div{ 幅: 100ピクセル; 高さ: 100px; } .div1{ 背景色: 赤; } .div2{ 背景色: スレートブルー; } .div3{ 背景色: スプリンググリーン; } </スタイル> </head> <本文> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </本文> </html>
結果プロット
ここで、 .div2
要素のclass
属性値を相対配置に設定して、上記の構造的実践との違いを確認し、相対配置のいくつかの特性を分析します。
コードブロック
<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ポジショニング</title> <スタイル> 。箱{ 幅: 400ピクセル; 高さ: 300px; 境界線: 1px 濃いオレンジ色; } .box div{ 幅: 100ピクセル; 高さ: 100px; } .div1{ 背景色: 赤; } .div2{ 背景色: スレートブルー; 位置: 相対的; } .div3{ 背景色: スプリンググリーン; } </スタイル> </head> <本文> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </本文> </html>
結果プロット
注意: 相対配置の座標位置を設定しないと、まったく移動しません。
作成者はclass
属性値を使用してdiv2
要素の位置座標を設定します。
コードブロック
<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ポジショニング</title> <スタイル> 。箱{ 幅: 400ピクセル; 高さ: 300px; 境界線: 1px 濃いオレンジ色; } .box div{ 幅: 100ピクセル; 高さ: 100px; } .div1{ 背景色: 赤; } .div2{ 背景色: スレートブルー; 位置: 相対的; 左: 50px; 上: 50px; } .div3{ 背景色: スプリンググリーン; } </スタイル> </head> <本文> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </本文> </html>
結果プロット
相対的な位置決め特性は次のように分析されます。
絶対位置決めの練習
絶対位置決めを実践する前に、コード構造がどのようになっているかを見てみましょう。
コードブロック
<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ポジショニング</title> <スタイル> 。箱{ 幅: 400ピクセル; 高さ: 300px; 境界線: 1px 濃いオレンジ色; } .box div{ 幅: 100ピクセル; 高さ: 100px; } .div1{ 背景色: 赤; } .div2{ 背景色: スレートブルー; } .div3{ 背景色: スプリンググリーン; } </スタイル> </head> <本文> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </本文> </html>
結果プロット
ここで、 .div2
要素のclass
属性値を絶対位置に設定して、上記の構造的実践との違いを確認し、次に絶対位置付けのいくつかの特徴を分析します。
コードブロック
<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ポジショニング</title> <スタイル> 。箱{ 幅: 400ピクセル; 高さ: 300px; 境界線: 1px 濃いオレンジ色; } .box div{ 幅: 100ピクセル; 高さ: 100px; } .div1{ 背景色: 赤; } .div2{ 背景色: スレートブルー; 位置:絶対; } .div3{ 背景色: スプリンググリーン; } </スタイル> </head> <本文> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </本文> </html>
結果プロット
注意: 絶対配置は標準のドキュメント フローの範囲外です。
div2
要素の位置座標は、 class
属性値で設定します。読者に直感的な印象を与えるために、最も外側のdiv
要素を中央揃えに設定します。
コードブロック
<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ポジショニング</title> <スタイル> 。箱{ 幅: 400ピクセル; 高さ: 300px; 境界線: 1px 濃いオレンジ色; マージン: 0px 自動; } .box div{ 幅: 100ピクセル; 高さ: 100px; } .div1{ 背景色: 赤; } .div2{ 背景色: スレートブルー; 位置:絶対; 左:0px; } .div3{ 背景色: スプリンググリーン; } </スタイル> </head> <本文> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </本文> </html>
結果プロット
注: 絶対位置の要素がブラウザの左端に表示されるのはなぜですか? 絶対位置の移動の原則: 絶対位置の要素は、親要素を探して、位置があるかどうかを確認します。位置がある場合は、親要素に従って配置します。親要素に位置がない場合は、親要素の親要素を探して、位置があるかどうかを確認します。これは、 body
要素がブラウザの位置であるため、 body
要素が停止するまで続きます。ここまで述べて、著者は新しい学習者に直感的な印象を与えましたので、実際に試して、本当のトリックを見てみましょう。
コードブロック
<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>ポジショニング</title> <スタイル> 。箱{ 幅: 400ピクセル; 高さ: 300px; 境界線: 1px 濃いオレンジ色; マージン: 0px 自動; 位置: 相対的; } .box div{ 幅: 100ピクセル; 高さ: 100px; } .div1{ 背景色: 赤; } .div2{ 背景色: スレートブルー; 位置:絶対; 右:0px; } .div3{ 背景色: スプリンググリーン; } </スタイル> </head> <本文> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </本文> </html>
結果プロット
注: 現在、著者は絶対配置座標を右配置に変更し、親要素は相対配置を設定しています。ここでは実践しません。配置された親要素の親要素が祖父要素でもあり、親要素と祖父要素の両方が同時に配置されている場合、要素は祖父要素ではなく親要素に従って配置されます。
絶対位置決めの特性は次のように分析されます。
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。
<<: さまざまなネットワーク画像形式におけるPNGの利点の詳細な説明
>>: HTML インライン要素と HTML ブロックレベル要素の概要と違い
MySQL の日付型単一行関数: CURDATE()またはCURRENT_DATE()は現在の日付を...
導入私はしばらくの間、postgresql データベースを使用していました。クラウドに移行した後、自...
目次1. 公式の足場を使って構築する2. プロジェクトディレクトリ分析3. TypeScript の...
WebページWB.ExecWB制御印刷方法コードをコピーコードは次のとおりです。 <テーブルの...
Apache Superset は、データを表示および探索する方法を提供する強力な BI ツールで...
目次1. Tencent Cloud Serverに接続する2. 環境整備Jenkinsのデプロイメ...
1. MySQLイメージを取得するターミナルから最新のMySQLイメージを取得するdocker pu...
私が使用している VMware Workstation Pro のバージョンは次のとおりです。 1....
Docker 公開方法は、DevOps (送信、コンパイル、パッケージ化、リリースなどの一連のイベ...
Nginx の動的および静的分離の概要Nginx は静的処理能力が強力ですが、動的処理能力が不十分で...
序文:前回の記事では、注意深い学生であれば発見できたかもしれない DDL ステートメントの使用法を中...
概要リレーショナル データベースでは、インデックスは、データベース テーブル内の 1 つ以上の列の値...
個人的にはインストール版よりも解凍版の方がインストールしやすいと思います。早速、解凍版のインストール...
DOM の概念DOM: ドキュメント オブジェクト モデル: ドキュメント オブジェクト モデルは、...
目次01. リスナーウォッチ(1)機能(2)特性と方法(3)監視対象(4)リスニングアレイ02. 計...