CSS - position 1. static 과 relative 포지션

바로 앞 포스팅에서 포지션 중 absolute, relative에 대해 썼었는데 그 외의 포지션들과, absolute, relative position에 대해 더 자세히 알아보려고 한다. 왜냐하면 내가 아직 이해가 잘 안됨ㅋㅋㅋㅋㅋ

 

최대한 강의에서 배운 것은 노트필기한 것과 직접 해본 것으로 복습을 하려고 하는데 이 개념은 도무지 어렵기도 하고, 헷갈리기 쉬운 것이라 생활코딩의 인강을 틀었다! 

 

Position: html의 태그가 화면상의 어디에 위치할 것인가 결정하는 것이다. 

---

1. Static vs. Relative

포지션에는 4가지 종류가 있는데 먼저 static과 relative에 대해 알아보도록 하자. 

우선 기본적으로 이렇게 적용했고, 모든 div 태그에 보더 5픽셀과 마진 10픽셀을 주었다. 

만약에 결과가 왜 이렇게 나왔는지 머리속에 빨리 그려지지 않는다면, '브라우저 마우스 오른쪽버튼+검사' 를 클릭해서 눈에 익히는 연습을 하자.

 

그럼 여기서 me라는 태그를 이동을 시켜보려고 한다. left:100px 랑 top:100px 의 값을 입력하였는데 미동도 없다. 

left:100px 를 하면 왼쪽에서부터 100픽셀만큼 이동이기에 me가 오른쪽으로 움직여야하고, top:100px은 위쪽에서 100픽셀만큼 이동이기에 me가 아래로 100픽셀만큼 내려가야 한다. 

 

왜 그럴까? 이유는 기본적으로 css의 각각의 elements, 요소들은 포지션의 기본값인 static을 가지고 있다. 

그래서 position: static; 이라고 지정하지 않아도, 혹은 포지션을 따로 써주지 않으면, static 설정을 유지하는 것이다. 

 

me태그에 position: relative를 적용하면 그제서야 움직이게 된다. 

<div id="me">me</div> 로 수정하였음^^

 

그렇다면 left, top 이 아닌 right과 bottom을 적용하면 어떻게 될까? me태그가 원래있던 자리에서 위로 50픽셀만큼, 좌측으로 30픽셀만큼 움직인 것을 볼 수 있다. 

 

그렇다면 right와 bottom을 그대로 두고, 아까했던 left와 top 오프셋을 추가하면 어떻게 될까?

결과는 처음에 했던 left:100px 랑 top:100px 오프셋만 쓴 것과 같다. 즉, right/bottom을 무엇으로 했던지 상관없이 left와 top 값을 우선으로 하는 것을 알 수 있다.