TIL - 05. position 속성 - relative, absolute, fixed

박태환·2021년 7월 6일
0

Today I Learned

목록 보기
5/15
post-thumbnail

처음 개인페이지를 만들 때 여기저기 기웃거리며 이 코드 저 코드 갖다 쓰며 많이 봤던 position 속성에 대해 다시 한 번 공부하고 이해한 것을 정리한다.

position 속성은 말 그대로 문서 안의 요소들의 위치를 지정할 수 있는 속성이다.

속성값으로는 static, relative, absolute, fixed 등이 있다.

1. static
모든 태그들은 기본적으로 position: static인 상태로 존재한다.
왼쪽에서 오른쪽으로, 위에서 아래로 자연스럽게 흐르는 방향.
2. ralative
요소의 위치를 변경하고 싶을 때 기본값(static)의 위치부터 변경.
position: relative; 자체로는 변화가 없으나 top, right, left, bottom 을 이용해 위치를 조정.
ex) left: 30px; -> 왼쪽에서 30px만큼 멀어진다.
3.absolute
원래 위치와 상관없이 위치를 지정할 수 있다. 단 가장 가까운 상위요소의 영향을 받는다.
(상위요소에 position: relative, absolute, fixed 셋 중 하나인 상태면 사용 가능)
일반적으로 상위 요소에 position: relative를 부여 후 사용한다.
가장 가까운 상위 요소의 position 상태가 모두 static인 경우 body태그가 기준이 된다.
4. fixed
absolute와 마찬가지로 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위요소의 영향을 받지 않기 때문에 화면이 변하더라도 고정된 위치를 설정할 수 있다.
ex) 상단 네비게이션 바

profile
mekemeke

0개의 댓글