CSS 웹에서 position 4종류 - absolute, relative

웹에서의 position은 4가지가 있다.

Position 속성

1. Static - default (normal flow) 기본값 

2. Absolute

3. Relative

4. Fixed - 스크롤해도 옆에 딱 붙어있는것

 

이번 포스팅에서는 absolute 절대적 좌표와 relative 상대적 좌표에 대해서 알아보도록 하자. 

---

Position: Absolute

absolute의 기준: 0,0 (left, top)
부모를 기준으로 움직입니다. 

 

우선 이렇게 기본적으로 셋팅을 해 놓았다. 

항상 블록태그를 초기화 하는 것이 중요한 것은 지난번 포스팅에서 언급했었다. 목록태그에서도 왼쪽에 찍히는 점을 ul, li{list-style: none;} 을 이용해 제거해주었다. 

그리고 이때 <li> 태그에 position:absolute; 속성을 입히면 box4만 남게 된다. 이때 나머지 box1,2,3은 사라진 것이 아니라 box4아래에 겹쳐져서 있는 것이다. (box1위에 box2, 그 위에 box3, box4) 마치 포토샵에서 레이어와 비슷하다고 생각하면 된다. 

 

맨 아래에 깔린 box1의 좌표를 움직여 보았다. 아까 absolute 포지션은 (left,top)으로 원점에서 이동한다고 했으니 왼쪽에서 100만큼, 윗쪽에서 100만큼 좌표를 움직여 보았다. 

*초록색 박스 좌측 상단이 앱솔루트 포지션의 기준점(0,0) 입니다. 

 

자아 그럼 응용해서 블록 쌓기를 해볼까? 어렸을때 많이 해본 성 만들기ㅋㅋ 

아무래도 모든 블록이 원점에서 이동하니 조금 숫자 계산이 힘들었지만, 이렇게 여러개의 모양을 쌓아서 직접 익혀보는 것이 중요! 

 

Position: Relative

relative의 기준: 나

나를 원점으로 해서 움직인다.

 

아까 앱솔루트 포지션과 동일하게 두고, position:relative; 로만 바꾸어 보았다. 

absolute에서는 층층이 쌓이던 블록태그가 relative를 사용하니 순서대로 나와있음을 알 수 있다.

왜? relative는 브라우저에서 0,0이 원점이 아닌, 각자 자신이 기준점이 되기 때문이다. 

 

<<여기서 잠깐 알고 가는 좌표값>>

 

그렇다면 포지션이 relative인 4개의 블록을 한줄로 기차처럼 주욱 나열해보자. *검정색 border는 크기를 잡아먹어서 설명을 위해 지웠다ㅋㅋ

빨간색 box1은 원점에 위치했다간 100px만큼 아래로 내려와야하니 양수로 top:100px 이고, 노란색과 초록색 box3,4는 자신의 위치에서 100vpx, 200px 만큼 올라야와 하니 음수로 top:-100px, top:-200px 값을 썼다.