CSSポジショニングによる階層関係の問題の詳細な説明

CSSポジショニングによる階層関係の問題の詳細な説明

絶対、相対、固定位置の位置決め

  1. absolue: 絶対配置。上、下、左、右を使用して、配置先の親要素に応じて配置します。親要素がない場合は、body 要素、つまりページ ドキュメント全体を基準にして配置されます。
  2. 相対的: 相対的な配置、元の位置に対する配置
  3. 固定: 絶対配置、ブラウザ ウィンドウに対する相対配置 (固定配置では、要素はブラウザ内の特定の位置に保持され、スクロール バーがスクロールしても変化しません)

地位による上下関係の問題

まず、CSS 属性は実際には x 軸、y 軸、z 軸を持つ 3 次元空間であるが、z 軸上の階層関係は position 配置を使用する場合にのみ反映される、つまり、z-index 属性は配置された要素に対してのみ使用できることを知っておく必要があります。それでは、これらの階層関係を分析してみましょう。

階層関係は次のようになります。

  • z-indexプロパティは配置された要素にのみ使用できます。
  • 配置属性を持つ要素のデフォルトのレベルは0です。レベルが同じ場合、次の要素が最上位になり、z-indexとして理解できます: 0+
  • 絶対配置された要素は、後続の要素の Y 軸を上に移動します。絶対配置後、要素は行レベルの要素になることがわかります。
  • z-index値が大きいほど、観察者に近くなります。たとえば、z-index: 2はz-index: 1の上位層にあります。

兄弟配置要素のみがレベルを比較できます

上記の点を分析してみましょう。

最初のポイントを分析してみましょう

<スタイル>
.c1{
    幅: 100ピクセル;
    高さ: 100px;
    背景色: rgb(255, 0, 0);
}
.c2{
    幅: 200ピクセル;
    高さ: 100px;
    背景色: rgb(0, 0, 255);
    位置: 絶対;
    上: 50px;

           }
</スタイル>
<本文> 
        <div class="c1">c1</div>
        <div class="c2">&nbsp&nbsp&nbsp&nbsp&nbspc2</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">
            &nbsp&nbsp&nbsp&nbsp&nbspc2
            <div class="c1">c1</div>
        </div>
</本文>

c1 を c2 の中に入れます。c2 の z-index が 1 に設定されている場合でも、c1 は c2 より上になります。つまり、ネストされた要素には階層関係がありません。階層関係があるのは兄弟要素のみです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  LinuxデバッガGDBの基本的な使い方の詳細な説明

>>:  Web ページのソース ファイルを表示できない場合はどうすればよいですか?

推薦する

HTMLの基礎を徹底解説(第1部)

1. WEBを理解するWeb ページは主にテキスト、画像、ハイパーリンクなどの要素で構成されていま...

Ubuntu 18.0.4 は mysql をインストールし、エラー 1698 (28000): ユーザー ''root''@''localhost'' のアクセスが拒否されましたを解決します

序文最近 Linux を学び、その後 Win から Ubuntu に変更しました。以前インストールし...

MySQL 5.7 に組み込まれているストレス テストの mysqlslap コマンドと構文の詳細な説明

序文mysqlslap は、MySQL サーバーへのクライアント負荷をシミュレートし、各ステージの時...

CSS3 でのシンプルな LED デジタル時計の実装方法

これは多くの人がやったことがあるはずです。ただうずうずして書きたかったので、時間をかけていじってダー...

Axiosは繰り返しのリクエストをキャンセル

目次序文1. リクエストをキャンセルする方法2. 重複リクエストの判定方法3. 繰り返しリクエストを...

http.server に基づく LAN サーバーの構築プロセスの分析

皆さんはこのような状況に遭遇したことがあるでしょうか。プロジェクトや研究開発を行う際に、緊急にファイ...

MySQL の binlog ログと、binlog ログを使用してデータを回復する方法を説明します。

ご存知のとおり、binlog ログは MySQL データベースにとって非常に重要です。万が一、データ...

HTML テーブル マークアップ チュートリアル (22): 行の境界線の色属性 BORDERCOLORLIGHT

行内では、明るい境界線の色を個別に定義できます。基本的な構文<TR ボーダーカラーライト=co...

VueはOSSを使用して画像や添付ファイルをアップロードします

OSS を使用して Vue プロジェクトに画像や添付ファイルをアップロードするここでは、写真のアップ...

Linux マルチスレッドにおけるフォークとミューテックス ロック プロセスの例

目次質問: 1. 最初の試み2. 合理的な分析3. 問題解決(1) pthread_join()の使...

MySQL データベースの基礎: 基本コマンドの概要

目次1. ヘルプ情報を使用する2. データベースの作成、削除、表示3. データベースに接続する4. ...

ページキャッシュを無効にするいくつかの方法を共有する

本日、開発中に、顧客からページをキャッシュしないように要求される方法に遭遇しました。調べたところ、ペ...

HTML テーブルタグチュートリアル (13): 内部境界スタイル属性ルール

RULES を使用すると、テーブルの内部境界のスタイルを制御できます。基本的な構文<TABLE...

HTML webpackプラグインの使用に関する簡単な分析

html-webpack-pluginプラグインを使用してページを開始すると、htmlページをメモリ...

Dockerコンテナにvimコマンドがない問題を解決する方法

問題を見つける今日、Docker コンテナ内のファイルを変更しようとしたところ、コンテナ内に vim...