ホームページ > 記事 > ウェブフロントエンド > CSS を使用して 2 つの DIV をオーバーラップする方法

CSS を使用して 2 つの DIV をオーバーラップする方法

php中世界最好的语言オリジナル: 2017-11-28 11:52:094326ブラウズ

DIV のオーバーラップを実装し、希望する順序でオーバーラップさせたい場合、それを実現するには CSS の絶対位置決めが必要です。今日はスタイルをオーバーラップさせる CSS の実装方法について説明します。

DIV のオーバーラップ CSS を使用すると、DIV を順番にオーバーラップできます。

DIV を希望の順序でオーバーラップできるようにするには、CSS、つまり CSS の絶対配置が必要です。

重複するスタイルにはメインの CSS スタイルの説明が必要です

1、z-index 重複する順序属性

2、position:relative およびposition:absolute オブジェクトのプロパティを位置決め可能 (重複可能) に設定します

3、左右上下絶対配置特定の位置設定

スタイルの調整

1、CSS幅

2、CSS高さ

3、背景効果を観察するために、異なるDIVに異なる背景色を設定します。区別してください

次に、ご希望に応じて DIV をオーバーレイおよびオーバーレイするレイアウトの例を提供します。 4 つの新しい DIV ボックスを作成します。CSS 名が「.div-relative」の大きな DIV ボックスが 1 つ、最初の大きな DIV オブジェクトボックスに配置された 3 つの小さな DIV ボックスです。DIV 名は「.div-a」、「.div」です。 -b」、「.div-c」。

未ソート、ソート済みの DIV カスケードおよびオーバーラップの例

完全な HTML ソースコードは次のとおりです:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>div重叠 叠加实例 未排层叠顺序 www.divcss5.com</title> 
<style> 
.div-relative{position:relative; color:#000; border:1px solid #000; width:500px; height:400px} 
.div-a{ position:absolute; left:30px; top:30px; background:#F00; width:200px; height:100px} 
/* css注释说明： 背景为红色 */ 
.div-b{ position:absolute; left:50px; top:60px; background:#FF0; width:400px; height:200px} 
/* 背景为黄色 */ 
.div-c{ position:absolute; left:80px; top:80px; background:#00F; width:300px; height:300px} 
/* DIV背景颜色为蓝色 */ 
</style> 
</head> 
<body> 
<div class="div-relative"> 
<div class="div-a">我背景为红色</div> 
<div class="div-b">我背景为黄色</div> 
<div class="div-c">我背景为蓝色</div> 
</div> 
</body> 
</html>

例の説明:

position を使用して絶対位置を実現し、position:relative 属性を親に設定します。を設定し、position:relative 属性を親に設定します。子は、position:absolute に加えて、左または右、上または下を設定して、親内での子の任意の位置を実現します。元のケースでは、オーバーラップは DIV コード自体の順序で配置され、DIV ボックスが後から入力されるほど、前に近くなります (上に浮かんでいます)。ソースコード自体の div コードの html 順序を変更することに加えて、css z-index を使用して DIV レイヤーの順序を実装することもできます。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。