HTML5画像カスケード表示実装例

最近、私たちは深センでプロジェクトに取り組んでいます。私たちは、いくつかの内部の理由のために独自の静的なページを記述する必要があります。組織のため

組織が必要としているのなら、やってみよう。ページレイアウトの1つを以下に示します。

赤枠で示した部分は、3つの画像を組み合わせたもので、それぞれの部分は以下の写真になります。

上記の画像の重なりを実現するには、attribute要素のpositionとz-indexのプロパティを設定するだけです。

• z-index: 要素の積み重ね順序を設定します。積み重ね順が高い要素は、常に積み重ね順が低い要素よりも前になります。つまり、z-indexの値が大きいほど、上位に表示されます。
• position: static、relative、absolute、fixed の値を持つ。
• Static:静的な位置決め。position属性が設定されていない場合、デフォルトはstaticです。staticの場合、top, left, bottom, rightは無効で、これらを使用するには、positionに他の3つの値のいずれかを設定する必要があります。
  
• Relative:相対的な位置決め。要素は静的配置の時と同じように配置され、静的配置で要素に割り当てられていたスペースはそのまま割り当てられます。要素の両側にある要素は、そのスペースを埋めるために要素に近づくことはありませんが、要素の新しい位置から圧迫されることもありません。
  
• Absolute：絶対位置指定。要素はそれを含む要素に従って配置されます。例えば、絶対配置された他の要素の中に入れ子になっている場合、その要素からの相対的な配置になります。
  
• Fixed:位置が固定されている。ブラウザ上の固定位置に設定され、他の要素とともにスクロールすることはない。比喩的に言えば、固定された要素は、スクロールバーが引き上げられたり引き下げられたりしても、画面上の同じ位置に留まることになります。IE6 はこの属性をサポートしていないことに注意してください。

実装は、divレイアウトで以下のようになります。

<div class="container3-1" style="float:left;">	
	<div>
		<img class="img1" style="position:absolute;z-index:1;float:left" src="img/4-1.png">
		<img class="img2" style="position:absolute;z-index:2;float:left" src="img/4-2.png">
		<img class="img3" style="position:absolute;z-index:3;float:left" src="img/4-3.png">
	</div>
	<div class="container3-1-1" class="font24" style="text-align:center;color:#FFFFFF;
                background-color:#aaa050;">Maintenance required
	</div>
</div>

統合は以下のように動作します。

HTML5の画像カスケード表示に関する記事は以上です。HTML5の画像カスケード表示については、Script Houseの過去の記事を検索していただくか、引き続き以下の関連記事をご覧ください。