CSSで要素の上に画像を配置する方法

CSS では、「z-index」属性を使用して、要素の上に画像を配置できます。この属性は、要素の重なり順を設定するために使用されます。この属性の値が大きいほど、以前の構文は「ピクチャ要素 {z-index:number;}」でした。

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css で要素の上に画像を配置する方法

CSS では、位置決めを通じて、z-index を使用して定義できます。要素の階層関係。次の例では、CSS の先頭に画像を固定する方法を説明します。

1. CSS で画像を固定する方法を説明するために、test.html という名前の新しい HTML ファイルを作成します。 div タグを使用してモジュールを作成し、img タグを使用してイメージを作成します。スタイル定義のために div タグと img タグにそれぞれ class 属性を追加します。

css タグで、クラス (mytest) を通じて div のスタイルを定義し、高さと幅を 400 ピクセルに設定し、背景色をグレーに設定し、z-index を使用して div のレベルを次のように設定します。 0.

2. CSS タグで、クラス (mypic) を通じて img スタイルを定義し、画像の位置属性を上から 20 ピクセル、上から 20 ピクセルの絶対位置に設定します。左側、そして z-index を通じて img のレベルを 1、つまり div の上に設定して、画像が一番上になるようにします。

ブラウザで test.html ファイルを開いて効果を確認します。

概要:

1. div タグを使用してモジュールを作成し、img タグを使用してイメージを作成します。

2. スタイル定義のために div タグと img タグにそれぞれ class 属性を追加します。

3. css タグで、クラス (mytest) を通じて div のスタイルを定義し、高さと幅を 400 ピクセルに、背景色をグレーに設定し、z-index を使用してレベルを設定します。 divを0にします。

4. CSS タグで、クラス (mypic) を通じて img スタイルを定義し、画像の位置属性を上から 20 ピクセル、左から 20 ピクセルの絶対位置に設定し、画像レベルを設定します。 z-index.1、つまり div の上にあるため、画像が一番上になります。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSSで要素の上に画像を配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。