<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>23.레이어</title>
</head>
<body>
<div style="background-color:Silver; width:100px ; height:100px ; position:absolute; z- index:0; left:150px ; top:120px ; ">
1번 영역(레이어)
</div>
<div style="background-color:Yellow; width:100px ; height:100px ;position:absolute;
z-index:0; left:120px ; top:100px ; ">
2번 영역(레이어)
</div>
<div style="background-color:Red; width:100px ; height:100px;
position:relative; z-index:10; overflow:scroll; white-space:nowrap; ">
3번 영역(레이어) 안녕하세요 만나서 반갑습니다
</div>
<div style="background-color:Blue; width:100px ;
height :100px ;
overflow:hidden;
white-space:nowrap;">
4번 영역(레이어)
</div>
<div id="five" style="background-color:Green; width:100px ;
height :100px ;
visibility:hidden;
display:block;
left:0px; top:50px ;">
5번 영역(레이어) </div>
<script type="text/javascript">
function ShowFive() {
if (document.getElementById("five").style.visibility != "visible") {
document.getElementById("five").style.visibility = "visible";
document.getElementById("five").style.display = "block";
}else
{
document.getElementById("five").style.visibility = "hidden";
document.getElementById("five").style.display = "none";
}
}
</script>
<input type="button"value="5번 레이어 보이기" onclick="ShowFive();" />
</body>
</html>
'.Net Project > CSS 2.0' 카테고리의 다른 글
| CSS2.0 관련 속성정리 (1) | 2009.07.29 |
|---|---|
| 22장 태그로 레이아웃 설정 (1) | 2009.07.29 |
| 21장 이미지 스타일 (0) | 2009.07.29 |
| 20장 목록관련스타일 (0) | 2009.07.29 |
| 18장 ScrollBarStyle (0) | 2009.07.28 |