position이란?
position 속성은 태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖습니다.
static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없습니다.
absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있습니다.
relative: 원래 있던 위치를 기준으로 좌표를 지정합니다.
fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다.
inherit: 부모 태그의 속성값을 상속받습니다.
좌표를 지정 해주기 위해서는 left, right, top, bottom 속성과 함께 사용합니다.
position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 됩니다.
사용 방법
#box1 { position:static;top: 20px; left: 30px; }
#box2 { position:absolute; top: 20px; left: 30px; }
#box3 { position:relative; top: 20px; left: 30px; }
#box4 { position:fixed; top: 20px; left: 30px; }
#box5 { position:inherit; top: 20px; left: 30px; }
이러한 식으로 사용이 가능합니다.
relative
요소를 일반적인 문서 흐름에 따라 배치한다.
요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다.
원래 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다.
위치를 이동하면서 다른 요소에 영향을 주지 않는다.
문서 상 원래 위치가 그대로 유지된다.
이런식으로 2개의 박스를 만들어 position:relative 주고 결과 값을 확인하면
이와 같이 시작점은 같지만 위치를 지정해준 붉은색 박스와 두개가 겹쳐서 나타는걸 볼수가 있습니다.
absolute
position 속성이 absolute로 설정되어 있는 엘리먼트는 웹페이지 상에 배치될 때 다음과 같은 특징을 갖습니다.
부모 엘리먼트 내부에 속박되지 않고, 독립된 배치 문맥(positioning context)을 가지게 됩니다. 마치 포토샵 같은 그래픽 툴에서 새로운 레이어를 추가하는 효과에 비슷하다고 생각하시면 됩니다.
따라서, 엘리먼트를 기본적으로 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있으며, 심지어 부모 엘리먼트 위에 겹쳐서 배치할 수도 있습니다.
단, 상위 엘리먼트 중에 position 속성이 relative인 엘리먼트가 있다면, 그 중 가장 가까운 엘리먼트의 내부에서만 엘리먼트를 자유롭게 배치할 수 있습니다. 즉, 전체 화면이 아닌 해당 상위 엘리먼트를 기준으로 offset 속성(top, left, bottom, right)이 적용됩니다.
이러한 방식으로 position : relative 로 요소 자기 자신의 원래 위치에서 감싸주는 solid 박스를 만들어준 뒤 position : absolute로 독립된 개체 박스를 만들어 주었습니다
위에 결과를 보시면 컨테이너라는 position : relative 요소 안에 absolute 박스가
독립된 요소로 움직이는 것을 볼수 있습니다.
fixed
화면을 위아래로 스크롤하더라도 브라우저 화면의 특정 부분에 고정되어 움직이지 않는 UI를 본적이 있으신가요? 보통 라이브 채팅 버튼을 구현할 때 많이 쓰이는 기법인데요. position 속성을 fixed로 지정하면 이렇게 요소를 항상 고정된(fixed) 위치에 배치할 수 있습니다.
이게 가능한 이유는 fixed 속성값의 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이기 때문인데요. top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지를 결정합니다.
위에 있는 코드를 보면 falst-child(상품1) , last-child(상품2)를 컬러가 있는 박스로 만들어 놓았고
.coupon은 오른쪽 하단 제일 구석에 배치
header는 왼쪽 상단 제일 구석에 배치하였다.
fixed를 사용하여 배치 하였기 때문에 고정이 되어 있으며 스크롤을 내려도 상단 사과 모양(header)과 오른쪽 하단에 있는 "오늘만 할인!!"(.coupon) 부분은 사라지지 않고 "상품1" "상품2"만 보이지 않는것을 확인 할 수 있다.
