css position 정복하기

1. position 속성

 

static, relative, absolute, fixed, sticky

 

모든것이 box로 되어있는 html 태그들은 기본적으로 위에서부터 아래로 쌓이는데, 필요에 따라 다르게 배치하고 싶을 때가 있다

 

 

기본값은 왼쪽이지만 오른쪽처럼 만들고 싶다면..?

 

 

2. relative

 

자기 자신의 static 위치를 기준으로 이동함

 

원래 나 자신이 있어야할 위치에서, top, left, right, bottom의 몇 pixel만큼 위치를 옮기는 것

 

레이아웃에서 여전히 static에 공간을 차지하고 있으며, 사람 눈에만 이동한 것처럼 보인다

 

 

3. absolute

 

브라우저 화면 기준으로 위치를 이동시킴

 

화면에서 공중에 뜬 것처럼 일반적인 flow를 벗어남

 

일반적인 normal flow에서 제거하고 relative와는 다르게 원래 static 공간에 공간을 차지하지 않는다

 

 

3. fixed

 

공중에 뜬 것처럼 일반적인 flow를 벗어남

 

스크롤을 내려도 사용자가 보는 입장에서 항상 고정된 위치에 존재하도록

 

absolute처럼 레이아웃에서 공간을 차지하지 않는다?

 

근데 absolute처럼 다른 요소가 그 자리로 이동하는것은 아닌것 같은데

 

왜냐하면 sticky도 fixed처럼 바뀐다고는 하지만 이동하지는 않았잖아

 

공간을 차지하지 않는다는 말이..

 

 

 

box1,2,3를 순서대로 쌓았을때

 

box2를 fixed로 바꿔보면...

 

 

box3가 box2자리로 올라오네

 

 

4. sticky

 

스크롤에 따라 static에서 fixed로 변경함

 

 

5. 예시

 

 

5-1)static

 

상자를 하나 만들면 기본적으로 있어야할 위치

 

왼쪽위부터 위에서 아래로 쌓이니까..

 

 

 

5-2) relative

 

원래 위치 static에서 떨어진 상대적 위치에 box를 위치시킨다

 

relative에서 위로 100px, 왼쪽으로 100px 움직이면 static이 될려면.,..

 

 

 

5-3) absolute

 

static이 아닌 가장 가까운 부모 요소를 기준으로 위치를 이동함

 

static이 아닌 부모요소를 찾지 못하면 브라우저 화면을 기준으로 위치를 이동한다고함

 

 

위 그림을 보면, static1, static2 각각을 기준으로 absolute1, absolute2를 만들어보았지만.. 두개의 absolute 모두 동일한 위치를 기준으로 50px, 100px씩 이동했다는 것

 

abolute3는 가까운 부모요소가 relative여서 abolute1,2와는 다르게 부모요소 relative를 기준으로 움직이고 있다

 

5-4) fixed

 

사용자가 보는 viewport에서 스크롤을 내리든 올리든 반드시 해당 위치에 고정시키고 싶을 때

 

 

position:fixed; bottom:0; left:0;으로 왼쪽 아래에 고정시켰다

 

실제로 다음과 같이 화면크기를 줄이고 스크롤을 위아래로 해도 항상 왼쪽 아래에 고정됨

 

 

6. relative vs. absolute

 

6-1) relative

 

 

형을 relative로 top 100px; left 100px로 이동시킨 모습

 

형의 원래 위치를 기준으로 이동한 것이다.

 

형이 원래 0,0쪽에 위치를 차지하고 있어서 동생은 올라오지 않는다

 

 

6-2) absolute

 

형이 더이상 원래 위치를 차지하지 않고 top 100px; left 100px만큼 이동한다

 

그래서 동생이 원래 위치에서 위로 올라온다

 

 

6-3) 차이 설명

 

 

 

7. absolute와 fixed

 

fixed 예시 : 브라우저 화면 하단에 메뉴바 고정시킬때

 

사람들에게 계속 보여주고 싶을때

 

 

 

absolute 예시

 

 

만약 absolute를 풀어본다면...

 

 

비교하기 저 버튼이 absolute로 이동하면서 원래 자리를 더 이상 차지하지 않고 나머지 텍스트들이 위로 올라온다

 

relative로 바꿔보면...?

 

 

방향 조정이 뭔가 있는건지.. 모르겠지만 아무튼 텍스트가 위로 올라가지 않는다

 

 

8. sticky 예시

 

원래는 static이었다가.. 스크롤을 내리거나 올리면 fixed처럼 따라붙는다

 

 

원래는 static으로 있다가.. 스크롤을 내려보면

 

 

위와 같이 fixed처럼 따라 붙으며.. 원래 자리를 여전히 차지하고 있어서 그런지 relative처럼 3번째 파란색 박스가 2번째로 오지 않는다