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 サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Stock Market GPT
AIを活用した投資調査により賢明な意思決定を実現
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
CSSを使用してガラスムルファズム効果を作成する方法
Aug 22, 2025 am 07:54 AM
CSSのガラス模倣効果を作成するには、背景のぼかしを実現するために背景フィルターを使用し、RGBA（255,255,255,0.1）などの半透明の背景を設定し、サブルの境界と影を追加して階層の感覚を高め、要素の背後に十分な視覚的コンテンツがあることを確認する必要があります。 1。背景：Blur（10px）を使用して、バックグラウンドコンテンツを曖昧にします。 2. RGBAまたはHSLAを使用して透明な背景を定義して、透明性の程度を制御します。 3. 3次元を強化するために、1pxsolidrgba（255,255,255,0.3）の境界線とボックスシェードを追加します。 4.容器に写真やテクスチャなどの豊富な背景があることを確認して、ぼやけた浸透効果を提示します。 5.古いブラウザと互換性があります
CSSのリストスタイルを変更する方法
Aug 17, 2025 am 10:04 AM
CSSリストスタイルを変更するには、最初にリストスタイルタイプを使用して弾丸または番号付けスタイルを変更します。 1.リストスタイルタイプを使用して、ULの弾丸をディスク、円、または正方形に設定し、OLの数は小数、下部アルファ、上部アルファ、下部ローマンまたはアッパーローマです。 2。リストスタイルでタグを完全に削除します：なし。 3.リストスタイルイメージ：url（ 'bullet.png'）を使用して、カスタム画像に置き換えます。 4。リストスタイルのポジションを使用します：in
CSSでダークモードテーマを実装する方法
Aug 22, 2025 am 09:55 AM
ダークモードを実装する主な方法は2つあります。1つは、システムの好みを適応させるために自動的に照会するためにカラーシェームメディアを好むことを使用することです。もう1つはJavaScriptを介して手動スイッチング機能を追加することです。 1.ユーザーシステムに応じて暗いテーマを自動的に適用するには、カラーシェームを好みます。 JavaScriptは必要ありません。メディアクエリのスタイルを定義するだけです。 2。手動の切り替えを実現するには、ライトテーマとダークテーマのクラスを定義し、トグルボタンを追加し、JavaScriptを使用してテーマステータスとローカルストレージを管理してユーザーの好みを保存する必要があります。 3.両方を組み合わせて、ページが読み込まれたときに最初にLocalstを読むことができます。
背景にCSSグラデーションを使用する方法
Aug 17, 2025 am 08:39 AM
cssgradientsprovidesmoothcolortransitionswithoutimages.1.Linear GradientsColorSalOrsalOrsArtaightlineSingDirectionSlikotobottOMORANGLESLIKE45DEG、ANDSUPPORTMULTIPRECOLORSTOPSFORCHLEXEFFECTS.2
CSSでグリッドテンプレートエリアを使用する方法
Aug 22, 2025 am 07:56 AM
grid-template-areaspropertyallowsdeveloperSocreateive、readablelayoutsbydefiningnamedgridareas;それぞれwith-areanamesonchildelementsは、headerheaderer "for
html5にdivを集中する方法は？
Aug 21, 2025 pm 05:32 PM
tocenteradivhorizontally、usemargin：0autowithadefinedwidth.2.forhorizontalandivecentering、applydisplay：flexontheparentwithjustify-atems：center.3.3。
CSSを使用した順序付けされたリストと順序付けられていないリストをスタイリングする方法
Aug 22, 2025 am 07:59 AM
cslowsfullcustomization ofordereddundunoredStoenhanceReadabilityanddesignconsistency.youcanchangededededededeled-style-typeproperty、soctingtingundliststoussquare、circe、ornobullets、および順調に測定された方法を順調に進めます
CSSにボックスシャドウを追加する方法
Aug 18, 2025 am 11:39 AM
Box Shadowsを追加するには、Box-Shadow属性を使用します。 1.基本的な構文はボックスシャドウです：水平オフセット垂直オフセットブルール半径拡張半径の色の影。 2。最初の3つの値が必要であり、残りはオプションです。 3。RGBA（）またはHSLA（）を使用して、透過効果を実現します。 4.正の膨張半径が影を拡張し、負の値が低下します。 5.コンマの分離によって複数の影を追加できます。 6.さまざまな背景で視界がテストされることを確認するために、過剰使用を避ける必要があります。この属性はブラウザによってよくサポートされており、合理的な使用によりデザインテクスチャが改善されます。
