[CSS] position property (relative, absolute, fixed)

position

position 속성(property)은 말 그대로 요소(element)의 위치(position)를 명확하게 하기 위해 쓰인다.

top, right, bottom,left 속성을 이용하여 위치를 변경할 수 있다.

.example {
	positon: absolute;
    top: 50px;
    right: 30px;

크게는 다섯 가지의 position이 있지만 이 중 3가지만 다뤄보도록 하자. 참고로 5가지는 다음과 같다.

• static
• relative
• absolute
• fixed
• sticky

1. relative

• position: relative;는 말 그대로 상대적으로(relative) 위치하는 요소이다.
• relative가 적용된 요소에 top, right, bottom,left 속성을 이용하여 상대적으로 위치를 변경할 수 있다.

2. absolute

• position: aboslute;는 가장 가까운 부모 요소에 대하여 상대적으로 배치가 된다.
• 가까운 부모 요소가 없는 경우, html 문서의 body를 부모 요소로 하여, 스크롤과 함께 이동한다.(아래의 fixed처럼 된다.)
• absolute를 쓰면 앞뒤에 나온 요소들과 더 이상 상호작용 하지 않는다.

3. fixed

position: fixed;는 말 그대로 viewport를 기준으로 고정되어 위치된다. 그래서 페이지가 스크롤이 되더라도 항상 동일한 위치에 유지된다.

** fixed 요소는 일반적으로 위치할 페이지에 공백을 두지 않는다.

(w3schools) CSS Layout - The position Property
(DaleSeo) CSS의 position 속성으로 요소 배치하기
(tistory) [CSS] CSS Position (relative, absolute) 한 방에 정리!