CSS Layout - position 속성

CSS의 position 속성은 HTML 요소들의 위치를 설정하는 데 사용된다.

position 속성의 값으로는 static, relative, absolute, fixed, sticky 이렇게 다섯 가지가 있다.

요소를 배치하는 방법의 유형이며, 각 유형에 따라 top, bottom, left, right 속성으로 위치를 조절할 수 있다.

 

 

 

1. static

 

HTML 요소의 기본 position 값이 static이다.

정적 위치로 top, bottom, left, right 속성에 영향을 받지 않는다.

 

See the Pen css position static by Park EunAe (@eapark) on CodePen.

 

이렇게 css로 직접 position: static을 지정하든 아무 설정을 하지 않든 똑같다.

있는 그대로 순서대로 배치된다.

 

 

 

2. relative

 

relative는 원래 자신의 위치에서 top, bottom, left, right로 주어진 값 만큼 이동한다.

 

See the Pen css position relative by Park EunAe (@eapark) on CodePen.

 

(static class를 지워도 되지만, 확실히 비교해보고자 놔두었다.)

position: relative로 설정된 div2의 위치는 확실히 달라졌다.

원래 자신이 있던 div1 아래 위치의 왼쪽으로부터 80px 만큼, 아래(bottom)로부터 50px 만큼 이동했다.

 

 

 

3. absolute

 

absolute는 자신의 부모 요소 중, static이 아닌 position을 가진 요소를 기준점으로 이동한다.

만약 static이 아닌 요소가 없다면 body 태그를 기준으로 이동한다.

absolute는 top, left를 꼭 적어주는 게 좋다. top, left로 옮길 일이 없으면 값을 0으로라도 주어야 한다.

 

See the Pen bGbXQpQ by Park EunAe (@eapark) on CodePen.

 

검은색 테두리의 커다란 div가 relative인 요소이므로, 이 요소를 기준으로 위치를 이동했다.

div3은 빈 div2의 자리를 채운다.

div2가 relative일 땐 div3은 원래 자신의 자리를 지킨 것과는 다른 모습이다.

position을 absolute로 지정하면 부모 요소에서 제대로 인식하지 못한다고 한다.

즉, absolute 자식 요소의 내용이 길어져 부모 요소 바깥으로 튀어나갈 때, 부모 요소가 그만큼 길이가 자동으로 길어지지 않는다.

 

 

 

4. fixed

 

position: fixed는 뷰포트(viewport)를 기준으로 배치된다.

뷰포트를 기준으로 top, bottom, left, right로 지정된 위치에 고정되어, 스크롤을 내려도 여전히 그 위치에 있다.

 

See the Pen css position fixed by Park EunAe (@eapark) on CodePen.

 

부모 요소와 상관없이 뷰포트를 기준으로 자리가 고정되어 있는 것을 확인할 수 있다.

 

 

 

5. sticky

 

sticky는 스크롤 위치에 따라 상대적인 위치였다가 고정된 위치로 바뀐다.

스크롤을 움직여 해당 요소가 지정된 위치에 다다르면 그 위치로 고정이 된다.

top, bottom, left, right 중 하나 이상은 값을 지정해야 sticky 역할을 제대로 한다.

 

참고로 이 속성 값은 Internet Explorer, Edge 15 및 이전 버전을 지원하지 않는다.

또한 사파리는 -webkit- 접두사를 붙여줘야 한다.

 

See the Pen zYYOrGz by Park EunAe (@eapark) on CodePen.

 

위 예제로, 처음엔 스크롤에 따라 움직이다가 top: 0에 다다르자 해당 위치에 고정되는 것을 볼 수 있다.

 

 

 

 

출처)

w3school -  CSS Layout - The position Property 

edwith 부스트코스 웹 프로그래밍 - Element가 배치되는 방법(CSS layout)