[CSS] Position

김수현·2022년 4월 12일

CSS absolute fixed position relative sticky 멋사 멋쟁이사자처럼 프론트엔드

🦁 멋쟁이사자처럼 Front-End School 2기

목록 보기

4/4

Position

absolute

relative

fixed

top, left, right, bottom

z-index

1. position이란?

이름에서처럼, position이란 웹 페이지에서 우리가 만들었던 html 태그나 id, class 박스 등의 위치를 지정해주는 속성이다. position 속성을 이용해 우리는 페이지의 레이아웃을 결정할 수 있다.

2. Position의 종류

2.1 static

기본적으로 모든 태그들은 따로 position 속성값을 주지 않았다면 static 값을 가진다. 즉 html에 쓴 태그 순으로 위치가 지정되게 됩니다. 그래서 굳이 기입할 필요는 없지만, 부모 객체에서 다른 position 속성값이 주어졌을 때, 그를 무시하기 위해 사용될 때가 있다.

▶️ 이렇게 static은 차례대로 엘리먼트를 놓습니다!

2.2 relative

단어 자체의 뜻처럼 '상대적'인 속성을 가지고 있다. 그럼 대체 '무엇'에 상대적일까? 바로 static, 즉 원래 자신이 있어야 하는 위치에 상대적이다. relative는 그 누구보다도 자신이 원래 있던 자리를 기억하는 요소이다. 그래서 position: relative;라는 값을 주고 left: 50px; 이라고 추가적으로 적어 주면, 본인의 static 자리에서 왼쪽으로 50px만큼 떨어진 자리에 위치하게 된다.

내가(relative를 준 태그) 밀리는 만큼 다음 콘텐츠들이 밀리지 않는다는 것이다.
하단에 로렘입숨을 넣어 콘텐츠가 어떻게 인식되고 있는지 확인할 것.

▶️ relative 속성을 주어 box2가 원래 있어야 할 자리에서 왼쪽으로 40px 떨어뜨린 모습이다.

2.3 absolute

absolute의 특징을 굳이 한 단어로 설명하자면 'my way'라고 할 수 있다. position: absolute;라고 한 뒤 top : 20px; right: 30px;이라고 추가적 값을 주면, 오른쪽 상단에 동떨어진 박스가 하나 놓여있는 것을 보실 수 있다. 이들은 기준점이 html 위치에 있기에, 왼쪽 제일 상단이 본래 자신의 위치라고 생각하고 움직이게 된다.

그러나, 이 absolute도 눈치를 보는 녀석이 있는데, 바로 부모 요소이다. relative, absolute, fixed 같은 position 속성이 부모에 놓여있다면, absolute는 position 속성을 가진 가장 가까운 부모의 박스 내를 기준으로 위치하게 된다. 마치 relative가 static의 자리를 유념하고 있는 것처럼 말이다.

❕ 결과 상세설명
상단의 코드를 웹페이지에 구현한 사진이다. 이처럼 relative 속성에 구애받지 않는 box3은 left와 top에 어느 정도 px을 두어 떨어뜨렸을 때 상단 제일 왼쪽을 기준점으로 움직였다면, relative 속성인 box1 내에 구속받는 box2는 top: 40px; 값을 주었을 때, box1의 위치를 기준으로 움직였음을 확인하실 수 있다. 즉 box2와 3에서 확인할 수 있듯 똑같이 position: absolute; 의 속성을 가지고 있어도, 상위 엘리먼트가 relative 속성을 가졌는지 아닌지에 따라 서로 다른 위치 결과가 나타난다는 것이다.

▶️ box3의 부모 = html 이므로 화면 맨윗부분 왼쪽에서 밑, 오른쪽으로 30px씩 떨어진 부분에 위치.
▶️ box2(absolute)의 부모 = box1(relative => static이 아닌 가장 가까운 부모 요소) 이므로 box1에서 위로 40px 떨어진 부분에 위치.

2.4 fixed

스크롤을 올리거나 내릴 때, 특정 박스가 고정되어 움직이지 않았으면 한다면, 이 fixed 속성을 이용하면 된다! position: fixed를 기입하면, absolute 가 position 속성을 가진 가장 가까운 부모를 기준으로 위치를 정하는 것처럼, fixed는 현재 사용자가 보고 있는 뷰포트를 기준으로 마치 화면에 붙은 것처럼 그 자리에 계속해서 위치할 것이다. 요즘 많은 사이트들이 페이지가 스크롤 되어도 중요한 정보(네비게이션 같은)를 화면에 계속 노출 시켜주기 위해 많이 사용하는 속성이다.

위 검색 결과 화면에서 스크롤을 내려도 상단의 검색 창은 사라지지 않고 뷰포트 상단에 고정되어 있는 모습을 확인할 수 있다.

▶️ 아래 이미지처럼 크롬 개발자 도구에서 header 클래스에 적용된 position: fixed 속성을 직접 확인해볼 수 있다.

2.5 sticky

아래 예제에서 스크롤을 내려보면 sticky된 요소는 부모에 붙는 것을 볼 수 있다.

IE 지원하지 않는다!(https://caniuse.com/?search=sticky)
❕ fixed는 스크롤에서 차이가 발생한다.(sticky는 부모요소에 달라붙는다.) => 아래에서 자세히 설명!

⁉️ position: fixed; vs position: sticky;
▶️ 아래 두개의 코드펜은 같은 예제로 position 속성만 fixed, sticky로 변경한 결과이다.

1️⃣ position: fixed;

2️⃣ position: sticky; (0.25x로 봐주세요)

▶️ fixed는 문서 흐름에서 완전히 이탈된다. viewport에 고정되어서 스크롤을 해도 지정된 자기 위치에서 절대 움직이지 않는다.
반면, sticky는 일반적인 문서 흐름에 따라 배치된다. 스크롤을 따라 움직이다가 가장 가까운 부모 element 기준으로 배치된다. 내가 정한 offset에 닿으면 그 순간부터 fixed 처럼 고정이 되다가 해당 부모의 위치가 스크롤에서 벗어나면 고정되던 위치가 사라진다. 최초에 relative 속성처럼 동작하다가 스크롤이 특정 지점에 도달하면 fixed 속성으로 동작하는 것이다.