오늘은 CSS position에 대해서 배워보려고한다!! 배우는데 상당히 오래걸렸기때문에 기억하고자 작성한다
What is position property?
position 이란 이름처럼 태그들의 위치를 결정하는 CSS이다. 오늘은 가장 많이 쓰이는 relative, absoulte를 포함해 static과 fixed까지 정리해볼것이다!
position:static
static은 모든 요소의 기본 position 값이다. 일단 모든 태그들은 처음에 position: static 상태이다. 기본위치인만큼 해당위치에 고정되어있고, 기준점또한 없다.
position:relative
relative는 태그의 위치를 살짝 변경하고 싶을 때 사용한다. top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능하다. 예시를보자!
-
position:static 일때
-
position:relative 적용
위에서 주의해야할점은 예시를 보면 알수있듯이 top: 5px를 주면 아래로, bottom: 5px를 주면 위로 이동한다는 점이다. 바깥쪽으로 이동하고 싶다면 음수(negative number)를 적용하면 가능하다. 또한 position relative 는 position absoulte의 조상의 역활도 한다.
position: absoulte
relative는 static인 상태를 기준으로 주어진 값만큼 이동했다면, aboulte는 조상을 기준으로 움직이는 친구다. 앞서 설명했듯이, position relative등의 parent의 위치를 기준으로 삼고 위치를 찾아 움직인다. 예시를 보면 이해가 더 빠를것이다!
output에서 확인할수있듯, class child absolute는 조상인 parent를 기준으로 움직인것을 확인할수있다.
position: fixed
position:fixed에 지정된 요소는 viewport를 기준으로 움직인다. fixed라는 단어에서 알수있듯, position:fixed에 지정된 요소는 스크롤을해도 위치가 고정되어있다. 움직이는 방법과 속성은 position: relative; position: absolute와 마찬가지로 top,right,bottom, left를 사용하면 된다.
references
