絶対、相対、固定位置の位置決め
地位による上下関係の問題 まず、CSS 属性は実際には x 軸、y 軸、z 軸を持つ 3 次元空間であるが、z 軸上の階層関係は position 配置を使用する場合にのみ反映される、つまり、z-index 属性は配置された要素に対してのみ使用できることを知っておく必要があります。それでは、これらの階層関係を分析してみましょう。 階層関係は次のようになります。
兄弟配置要素のみがレベルを比較できます 上記の点を分析してみましょう。 最初のポイントを分析してみましょう <スタイル> .c1{ 幅: 100ピクセル; 高さ: 100px; 背景色: rgb(255, 0, 0); } .c2{ 幅: 200ピクセル; 高さ: 100px; 背景色: rgb(0, 0, 255); 位置: 絶対; 上: 50px; } </スタイル> <本文> <div class="c1">c1</div> <div class="c2">     c2</div> </本文> この時点で、c2 はより高いレベルにあり、c1 の上に積み重ねられる必要があります。 2番目のポイントを分析してみましょう <スタイル タイプ="text/css"> .c1{ 幅: 100ピクセル; 高さ: 100px; 背景色: rgb(255, 0, 0); 位置: 相対的; } .c2{ 幅: 200ピクセル; 高さ: 100px; 戻る このとき、配置された要素は階層を持ち、次の要素が最上位にある 3番目のポイントを分析してみましょう <スタイル タイプ="text/css"> .c1{ 幅: 100ピクセル; 高さ: 100px; 背景色: rgb(255, 0, 0); 位置: 相対的; このとき、c2 の位置は絶対的であるため、c3 は c2 を直接覆い、後続の要素は c2 に移動します。2 番目のポイントから、c3 は c2 の上にあるため、c3 は c2 を直接覆っていることがわかります。 4番目のポイントを分析してみましょう <スタイル タイプ="text/css"> .c1{ 幅: 100ピクセル; 高さ: 100px; 背景色: rgb(255, 0, 0); 位置: 相対的; c1 と c2 は両方とも配置された要素で、デフォルトの z-index は 0 です。c1 が c2 の上になるように、c1 の z-index を 1 に設定します。 5番目のポイントを分析してみましょう <スタイル タイプ="text/css"> .c1{ 幅: 100ピクセル; 高さ: 100px; 背景色: rgb(255, 0, 0); 位置: 相対的; } .c2{ 幅: 200ピクセル; 高さ: 100px; 背景色: rgb(0, 0, 255); 位置: 絶対; zインデックス: 1; } </スタイル> <本文> <div class="c2">      c2 <div class="c1">c1</div> </div> </本文> c1 を c2 の中に入れます。c2 の z-index が 1 に設定されている場合でも、c1 は c2 より上になります。つまり、ネストされた要素には階層関係がありません。階層関係があるのは兄弟要素のみです。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: LinuxデバッガGDBの基本的な使い方の詳細な説明
>>: Web ページのソース ファイルを表示できない場合はどうすればよいですか?
1. WEBを理解するWeb ページは主にテキスト、画像、ハイパーリンクなどの要素で構成されていま...
序文最近 Linux を学び、その後 Win から Ubuntu に変更しました。以前インストールし...
序文mysqlslap は、MySQL サーバーへのクライアント負荷をシミュレートし、各ステージの時...
これは多くの人がやったことがあるはずです。ただうずうずして書きたかったので、時間をかけていじってダー...
目次序文1. リクエストをキャンセルする方法2. 重複リクエストの判定方法3. 繰り返しリクエストを...
皆さんはこのような状況に遭遇したことがあるでしょうか。プロジェクトや研究開発を行う際に、緊急にファイ...
ご存知のとおり、binlog ログは MySQL データベースにとって非常に重要です。万が一、データ...
行内では、明るい境界線の色を個別に定義できます。基本的な構文<TR ボーダーカラーライト=co...
OSS を使用して Vue プロジェクトに画像や添付ファイルをアップロードするここでは、写真のアップ...
目次質問: 1. 最初の試み2. 合理的な分析3. 問題解決(1) pthread_join()の使...
目次1. ヘルプ情報を使用する2. データベースの作成、削除、表示3. データベースに接続する4. ...
本日、開発中に、顧客からページをキャッシュしないように要求される方法に遭遇しました。調べたところ、ペ...
RULES を使用すると、テーブルの内部境界のスタイルを制御できます。基本的な構文<TABLE...
html-webpack-pluginプラグインを使用してページを開始すると、htmlページをメモリ...
問題を見つける今日、Docker コンテナ内のファイルを変更しようとしたところ、コンテナ内に vim...