前へ 目次 次へ

z-index

style27.css 
.box1{
	position: absolute;
	top: 50px;
	right: 100px;
	background-color: red;
	width: 100px;
	height: 100px;
}
.box2{
	position: absolute;
	top: 50px;
	right: 100px;
	background-color: green;
	width: 40px;
	height: 200px;
}
#zi1{
	z-index: 1;
}
#zi2{
	z-index: 2;
}
css27s1.html 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>border style</title>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<link rel="stylesheet" href="style27.css" type="text/css">
<p class="box1" id="zi1">
box1
</p>
<p class="box2" id="zi2">
box2
</p>
</body>
</html>

クリックすると表示結果をみることができます。

css27s2.html 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>border style</title>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<link rel="stylesheet" href="style27.css" type="text/css">
<p class="box1" id="zi2">
box1
</p>
<p class="box2" id="zi1">
box2
</p>
</body>
</html>

クリックすると表示結果をみることができます。

2003//()

トップページへ

広告 花 万馬券 無料レンタルサーバー ブログ blog