要素の重なりを決める 実験

welcome to real summer











<head>
<style type="text/css">
<!--
 .title11 {	
	position : absolute;
	top:130px;
	left:160px;
	font-size:24px;
	font-family:impact;
	color:white;
	z-index:3
;}

.ph {
	position: absolute;
	top:40px;
	left:80px;
	z-index:2
;}

.ph1 {	
	position: absolute;
	top:80px;
	left:120px;
	z-index:1
;}
-->
</head>
<body>
    
 <img class="ph1" src="image/art_egg.gif">

<img class="ph2" src="image/p1010001.jpg">

<span class="title11">welcome to real summer</span>



</body>

要素同士が重なって表示される場合の、重なりの順序を指定する。
z-index に指定した数値が大きなものほど前面に表示される。
例1
<div style="position:absolute; width:50px; height:50px;
     z-index:2; background-color:green; top:10px; left:10px;"></div>
<div style="position:absolute; width:50px; height:50px;
     z-index:3; background-color:blue; top:40px; left:30px;"></div>
<div style="position:absolute; width:50px; height:50px;
     z-index:1; background-color:red; top:20px; left:50px;"></div>