examl.html
<!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></title>
<meta name="generator" content="editplus" />
<meta name="author" content="김종현" />
<style type="text/css">
/*
포지션이 스태틱인 경우가 가장 안쪽으로 배치된다.
*/
#box1, #box2, #box3 {
border:1px solid black;
width:100px; height:100px;
}
#box1{
left:50px;
top:50px;
background-color:#f5eea7;
position:absolute;
z-index:1;
}
#box2{
left:80px;
top:80px;
background-color:#cdf0a6;
position:absolute;
z-index:2;
}
</style>
</head>
<body>
<!-- Ex29_zindex.htm -->
<div id="box1">상자1</div>
<div id="box2">상자2</div>
<div id="box3">상자3</div>
</body>
</html>
결과
CSS position:fixed
examl.html
<!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></title>
<meta name="generator" content="editplus" />
<meta name="author" content="김종현" />
<style type="text/css">
#box {
border:1px solid black;
width:100px;
height:300px;
background-color:#fcf8d1;
position:fixed;
/*
left:0px;
top:0px;
*/
right:10px;
top:50px;
}
</style>
</head>
<body>
<!-- Ex28_fixed.htm -->
<div id="box">내가본 물건 옷 가방 오토바이 자동차 어쩌구 저쩌구</div>
<p>내용입니다.1</p>
<p>내용입니다.2</p>
<p>내용입니다.3</p>
<p>내용입니다.4</p>
<p>내용입니다.5</p>
<p>내용입니다.6</p>
<p>내용입니다.7</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
<p>내용입니다.</p>
</body>
</html>
결과
마우스를 드래그 해도 오른쪽 박스는 움직이지 않는다.
CSS position:absolute 시작지점 컨트롤
examl.html
<!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></title>
<meta name="generator" content="editplus" />
<meta name="author" content="김종현" />
<style type="text/css">
#box1, #box2, #box3 {
border:1px solid black;
width:100px;
height:100px;
background-color:yellow;
}
#box3 {
position:absolute;
left:50px;
top:50px;
}
/*
absolute : 부모한테 먼저물어본다 자식요소가 있다면 부모를 잘확인해야 시작점을 찾을수 있다.
단 포지션이 스태틱이 아닐경우에 가능하다.
*/
#box2 {
position:absolute;
}
</style>
</head>
<body>
<!-- Ex27_absolute.htm -->
<div id="box1">
상자
</div>
<div id="box2">
<div id="box3">테스트</div>
</div>
</body>
</html>
결과
CSS position:absolute
examl.html
<!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></title>
<meta name="generator" content="editplus" />
<meta name="author" content="김종현" />
<style type="text/css">
#box1, #box2, #box3{
width:200px;
height:100px;
border:1px solid black;
background:#cbfbfc;
}
/*
투명종이 개념이다. 네모난 박스를 여러개 겹쳐진다.
기준점은 최초 div 위치
relative 같은 경우는 방을 남겨놓고 이동하지만
absolute 방을 다른 요소로 채우고 방배치를 한다.
*/
#box3 {
position:absolute;
/*
left:100px;
top:130px;
*/
/* 보통 2개의 요소만 사용한다. left와 top을 주로 사용한다.*/
right:0px;
top:0px;
}
</style>
</head>
<body>
<!-- Ex25_absolute.htm -->
<div id="box1">상자</div>
<div id="box3">테스트</div>
<div id="box2">상자</div>
</body>
</html>
결과
CSS position:relative
examl.html
<!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></title>
<meta name="generator" content="editplus" />
<meta name="author" content="김종현" />
<style type="text/css">
#box1, #box2, #box3{
width:200px;
height:100px;
border:1px solid black;
background:#cbfbfc;
}
/*
투명종이 개념이다. 네모난 박스를 여러개 겹쳐진다.
기준점은 최초 div 위치
*/
#box3 {
position:relative;
/*
left:50px;
top:-50px;
*/
right:50px;
}
</style>
</head>
<body>
<!-- Ex25_relative.htm -->
<div id="box1">상자</div>
<div id="box3">테스트</div>
<div id="box2">상자</div>
</body>
</html>
결과
