ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。