우리가 페이지에 어떤 것( 텍스트나, 그림, 레이아웃 혹은 기타 등등) 들을 배치할 때 써야 할 CSS 속성 중에
Position 이라는 속성은 우선 상속되지 않는다고 한다.
- Static의 속성
다른 CSS의 사용과 마찬가지로
스타일 태그 내부에서 position을 정하게 된다.
<style>
.ex1 {
background-color: lightblue;
width: 200px;
height: 200px;
position: static;
}
</style>
이런식으로 써준다음에 body에서 ex1을 Class로 써주게 되면 200px 넓이와 높이를 가진 네모박스가 기본 위치에 나타나게 된다.
(기본위치는 좌측 상단이다.)
보통 static은 사용할 일이 없지만, 앞에 설정된 position을 무시할 때 사용되기도 한다.
- relative의 특징
position: relative은 위치 계산을 할 때 static의 원래 위치부터 계산한다.
top, left, right, bottom 을 이용해서 상대적인 위치를 설정할 수 있으며,
left : 100px; 을 입력하면 설정된 위치로 부터 오른쪽으로 100px만큼 이동한다.
즉 각 입력하신 위치로 부터 멀어질만큼 입력하신다고 생각하시면 된다.
- absolute의 특징
absolute는 relative와 달리 문서의 원래 위치와 상관없이 위치를 지정할 수 있다.
그리고 static을 제외한 가까운 상위요소를 기준으로 자신의 위치를 결정한다.
상위가 없으면 html을 기준으로 삼는다. 그리고 static이나 relative와는 달리 바깥쪽에 공간이 생기지 않는다는 특징이 있다.
- fixed의 특징
단어 자체에서 풍겨오는 느낌처럼.. 고정해버리는 녀석이다.
예를들면 우리가 인터넷에서 접하는 광고들은 아무리 화면을 이동해도 집요하게 따라붙는다.
이런 경우들이 바로 fixed를 이용해서 고정시켜버린 광고들이라고 할 수 있겠다.
IE7, IE8은 position: fixed 값이 적용되지 않으므로 문서 타입을 규정해주어야 함을 숙지하도록 하자!
추가 수정은 추후에 하겠습니다.
