배치 방법, Position
position 프로퍼티를 이용한 배치 방법
- 정적 배치 - position : static(디폴트)
- 상대 배치 - position : relative
- 절대 배치 - position : absolute
- 고정 배치 - position : fixed
- 유동 배치 - float : left 혹은 float : right
고정 배치, Fixed Position
Merry Christmas!!
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>고정 배치</title>
<style>
#fixed {
position: fixed;
bottom: 10px;
right: 10px;
width: 100px;
padding: 5px;
background: red;
color: white;
}
</style>
</head>
<body>
<h3>배치 방법, Position</h3>
<hr>
<h3>position 프로퍼티를 이용한 배치 방법</h3>
<ul>
<li>정적 배치 - position : static(디폴트)</li>
<li>상대 배치 - position : relative</li>
<li>절대 배치 - position : absolute</li>
<li><strong>고정 배치</strong> - position : fixed</li>
<li>유동 배치 - float : left 혹은 float : right </li>
</ul>
<hr>
<h3>고정 배치, Fixed Position</h3>
<hr>
<img src="christmastree.png" width="300" height="300" alt="크리스마스 트리">
<div id="fixed">Merry Christmas!!
</div>
<hr>
</body>
</html>
]]>