■z-index
・ボックスの重なりの順序を指定するプロパティ
・positionプロパティでstatic以外の値が指定されている要素に適用される
■利用例
overflowとz-indexの特性を利用してテキスト文章と画像レイヤーを部分的に重ねスクロールすると画像の中に文章が消えていくデザインをご紹介します。
[サンプル-ソース]
<html>
<head>
<title>overflowとz-indexの組み合わせ</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
<!--
.gif { position: absolute;
top: 20px;
left: 50px;
background: url(01.gif)
no-repeat;
margin: 0px;
padding: 0px;
width: 215px;
height: 55px;
overflow: hidden;
text-indent: font-weight: bold; color: #000000;
z-index: 1;
}
.text { position: absolute;
top: 50px;
left: 50px;
border-left: solid 1px #cc0000;
border-bottom: solid 1px #cc0000;
margin: 0px;
padding: 15px 5px 15px 10px;
width: 215px;
height: 100px;
overflow: auto;
z-index: 0;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div class="gif"> サンプル例</div>
<div class="text"> 文章が画像の中に消えていくデザインを作成します。<br>
文章が画像の中に消えていくデザインを作成します。<br>
</div>
</body>
</html>
[サンプル-表示例]
