|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#one{
background-color: #008299;
width: 200px;
height: 50px;
}
#two{
position: static;
/*정적 위치 설정
(여기서는 position을 static으로 선언하면 문서의 정상적인 흐름에 따라서 배치된다
static으로 선언하지 않은 것과 결과는 같다.)*/
background-color: #FAED7D;
width:200px;
height: 50px;
}
#three{
position : relative;
left : 30px;
/*상대 위치 설정
(정상적인 위치에서 왼쪽으로 30픽셀 이동)*/
background-color: #99004C;
width:200px;
height:50px;
}
#four{
position: absolute;
/*절대 위치 설정*/
top: 100px;
left : 100px;
background-color: gray;
width:200px;
height:50px;
}
#five{
background-color: #F361A6;
position: fixed;
/*고정 위치 설정*/
top:0px;
right:0px;
}
</style>
</head>
<body>
<p id="one">Block #1</p>
<div id="two">Block #2<br/>position:static;</div>
<br/>
<div id="three">Block #3<br/>position:relative;<br/>left:30px;</div><br/>
<div id="four">Block #4<br/>position:absolute;
<br/>top:100px; left:100px;</div>
<div id="five">Block #5<br/>position:fixed;<br/>top:0px; right:0px;</div>
</body>
</html> | 
