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 ブロックレベル要素の概要と違い
Google の Flutter の目標は、どのプラットフォームを使用していても、ネイティブの速度...
この記事では、Windows に MySQL 5.7 圧縮パッケージをインストールする方法について説...
前回の記事「1行のCSSコードの魅力」では、たった1行のCSSコードで生成できる美しい(奇妙な感じと...
目次Centosイメージを取得するCentos ベースの nginx コンテナを生成するCentos...
DIVの背景は半透明ですが、DIV内の文字は半透明ではありませんコードをコピーコードは次のとおりです...
MySQL-8.0.22-winx64のデータベースインストールチュートリアルは参考になります。具体...
現在、多くの企業が割引コードを通じてプロモーションを行っています。今では、8桁の割引コードを実装して...
こんにちは、みんな!技術の話ばかりで髪は切らないトニーです。データベース関数は、何らかの機能を持ち、...
最近は学ぶべき知識が多すぎて、どれを先に学べばいいのかわかりません。このブログはもともとxamari...
この機能を実装するにあたり、本家ブロガーさんから拝借した方法では色の切り替えが実現できず、長い間考え...
1. システムインストールパッケージ yum -y インストール make gcc-c++ cmak...
TypeScript バンドルwebpack 統合通常、実際の開発では、ビルド ツールを使用してコー...
目次1. データソース2. データの総合順位1) 総合ランキング2) 同順位3) 同順位3. データ...
1. nginx-1.8.1.tar.gzを解凍する2. fastdfs-nginx-module-...
Mac を返却して以来、元のラップトップは使用されていません。このラップトップの構成は非常に良好で...