태그를 어떻게 위치시킬지를 정의하며, 상대적 관계를 통해 HTML의 요소를 자유롭게 위치시키는 속성
static: 기본값, 위치 임의로 설정 불가
relative: 원래 있던 위치를 기준으로 좌표를 지정
absolute: 절대 좌표와 함께 위치를 지정
fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정
작성된 태그가 순차적으로 나열되는 default값
기본적으로 표시된 위치를 기준으로 새로운 위치를 지정 가능
새로운 위치를 지정하지 않는 이상 기본적으로 표시된 위치와 같음
일반적으로 relative만으로 요소의 위치를 이동시키는데 사용되지 않고,
absolute의 기준으로써 사용됨
좌표 프로퍼티(top, right, bottom, left)가 있어야 원래의 위치에서 이동 가능
div.relative {
position: relative;
left: 10px;
top: -10px;
}
특정부모에 의해 절대적으로 움직임
부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됨
일반적으로 absolute를 쓸 경우,
절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여
<html>
<head>
<style>
body { margin: 0; }
.parent {
position: relative;
width: 200px;
height: 200px;
}
.absolute-box {
position: absolute;
height: 200px;
width: 200px;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="absolute-box">absolute box (in parent)</div>
</div>
<div class="absolute-box">absolute box (no parent)</div>
</body>
</html>
스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치가 고정(fixed)
fixed는 부모를 필요로 하지 않음
fixed 프로퍼티 선언 시 주의할 점,
block 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야함
주로 웹사이트에서 메뉴바를 만들때 자주 이용
div.footer-bar {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 32px;
}