CSSで2つのdivを重ねる方法

2 つの div をオーバーラップさせる Css メソッド: 最初に [position:absolute] 属性を使用して div の絶対位置を設定し、次に z-index 属性を使用してどの div が上位層にあるかを決定します。 z-index 属性は、要素の積み重ね順序を指定するために使用されます。

このチュートリアルの動作環境: Windows 10 システム、CSS2 バージョン、この方法はすべてのブランドのコンピューターに適しています。

重要な属性の紹介:

position 属性は、要素の配置タイプを指定します。

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

属性値:

• absolute 絶対位置の要素、相対位置を生成します。静的配置以外の最初の親要素で。要素の位置は、「left」、「top」、「right」、および「bottom」属性によって指定されます。

• relative 通常の位置を基準にして、相対的に配置された要素を生成します。したがって、「left:20」は要素の LEFT 位置に 20 ピクセルを追加します。

z-index 属性は、要素の積み重ね順序を指定します。積み重ね順序が高い要素は常に、積み重ね順序が低い要素の前に表示されます。

属性値:

• auto デフォルト。積み重ね順序は親要素と同じです。

• #number 要素の重なり順を設定します。

• #inherit z-index 属性の値を親要素から継承することを指定します。

コード実装:

html コード:

<div id="img_head" >
<img src="img/首页logo.png" class="head">
</div>
<div id="img_head_back">
<img src="img/背景.png" class="back" >
</div>

css コード:

#img_head{
border: 1px solid #FF0000; 
position:absolute;
width:210px;
height: 210px;
z-index: 20;
left:600px;
top:170px;
text-align: center;
}
#img_head_back{
border: 0px solid #FF0000;
position:absolute;
width: 210px;
height: 210px;
left:600px;
top:170px;
z-index:10;
}

関連する推奨事項: CSS チュートリアル

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