CSS Position 검색하는 것은 여기서 끝내기 | absolute? relative ?

같이코딩 - CSS Position (실습포함)

 

오늘은 CSS position 속성에 대해 알아보겠습니다. position은 컨텐츠를 어떻게 배치시킬지에 대한 방식을 결정하는데요

 

우리가 이렇게 레이아웃을 다 짜고 어떤 특정 요소의 위치를 살짝 변경하고 싶을때가 있습니다.

이때 position을 사용하게 됩니다.

position을 처음 접하게 되었을 때 어떤 상황에 무슨 속성값을 넣어야 하는지 많이 헷갈립니다.

자 그럼 더 이상 헷갈리지 않도록 쉽게 그림을 통해 정리해드리겠습니다.

 

기본적으로 아무런 position 값을 설정해주지 않았을 때

position은 default값으로 static을 가집니다

 

 

이때 위치를 변경하고자 top bottom과 같은 속성을 사용해도 요소는 움직이지 않습니다.

즉 위치를 변경하고자 하면 position에 어떤 값을 할당해주어야하는데요

크게 static relative absolut fixed가 있습니다

static은 기본적으로 위치를 바꾸는데는 영향을 끼치지않는 값이기때문에

relative absolute fixed에 대해 한번 알아보겠습니다.

 

우리가 이런 레이아웃을 우리가 짰다고 해봅시다

이때 1번 아이템에 position relative로 선언해주면

1번 아이템이 원래 있던 위치를 기준으로 위 아래 왼쪽 오른쪽으로 움직이게 됩니다.

 

 

이렇게 top: 30px을 해주면 1번 아이템이 원래있던 위치에서 30px 아래로 내려오게 되죠 참고로 요소를 움직이기 위해서는

position이 absolut, relative 혹은 fixed라고 선언된 박스안에

top, bottom, left, right를 적고 얼만큼 움직여줄지 값을 적어주면 됩니다.

이때 음수, 양수 둘다 할당 가능한데요.

 

 

0이라고 적으면 해당 박스의 경계에 붙어있게 됩니다.

 

 

양수를 적으면 박스를 기준으로 안쪽으로 할당한 값 만큼 멀어지게 되고

음수를 적으면 박스의 경계를 기준으로 바깥쪽으로 할당한 값 만큼 멀어지게 되죠

 

다시 우리가 짠 레이아웃으로 돌아와 이번에는 2번 아이템에 position absolute를 부여해봅시다

 

그럼 다른 아이템들이 해당 아이템의 크기를 무시한채 배치됩니다.

 

 

그리고 여기서 top 30px을 주고 움직여보면

body를 기준으로 위로 30px의 간격이 생기도록 배치됩니다.

 

왜 그런지 살펴보면 position absolut로 선언하면 해당 아이템을 다른 레이아웃으로 보내버립니다.

그래서 해당 아이템이 없어진줄 안 1번과 3번 아이템은 2번을 무시한채로 기존의 레이아웃 규칙에 따르게 되죠

 

 

그리고 엉뚱하게 body를 기준으로 30px 멀어졌던 이유는 position이 absolute로 선언된 박스를 움직일때

absolute는 기준점을 찾습니다. relative가 본인이 있는 위치를 기준에서 움직였다면

absolute는 relative로 선언된 부모를 기준으로 움직이게 됩니다.

 

 

말이 어렵죠? 그림으로 보면 명확하게 이해할 수 있습니다.

여기 2번 아이템의 부모 컨테이너에는 아무런 position이 선언되어 있지 않습니다.

 

 

absolut는 relative로 선언된 부모를 기준으로 움직이게 된다고 했죠? 그럼 계속 올라가서 relative로 선언된 부모를 찾습니다

여기에서는 relative로 선언된 아이템2의 부모컨테이너가 없기때문에 최종적으로 body를 기준으로 움직이게 되는거죠

 

 

여기서 이 아이템들을 감싸고 있는 컨테이너에 position relative라고 선언해주면 relative 속성을 가지는 부모를 찾았으니

이제 body를 기준으로 움직이는 것이 아닌 부모 컨테이너를 기준으로 움직이게 됩니다.

 

 

마지막으로 fixed는 요소의 위치를 고정할 때 사용합니다 앞서 요소를 absolute로 선언하게 되면

다른 차원으로 레이아웃을 보내버린다고 했었습니다. fixed도 마찬가지인데요.

 

 

fixed는 브라우저 화면의 전체크기 즉 뷰포트를 기준으로 요소를 고정합니다

우리가 웹사이트를 이용하면서 자주 볼 수 있는 헤더에서 그 특징을 알 수 있습니다.

유튜브 화면을 보면 스크롤을 얼마나 내리던 유튜브 로고와 검색창이 위에 고정된채 스크롤이 이루어지는 걸 볼 수 있습니다.

 

 

이렇게 3번 아이템에 position fixed를 부여하고 top 0 , left 0를 하게되면

이렇게 보이는 화면을 기준으로 아무리 스크롤를 내려도 왼쪽 상단에 고정되어 있게 되죠

 

여기까지 css에서 요소를 움직일 때 사용하는 position 속성에 대해 알아보았습니다.

더 알고싶은 내용이 있으시면 댓글로 남겨주세요 :)