사실 flex, grid만 알면 충분할 것이라고 생각했는데 css 클론을 하다보니 포지셔닝이 매우 중요하다는 것을 깨달았다. 사실 포지셔닝 공부하기 싫어서 나 스스로 세뇌한 듯
그래서 오늘은 진짜 CSS 포지셔닝을 완벽히 이해하겠다는 생각으로 새 글 작성을 눌렀다.
포지셔닝을 쉽게 이해하기 위해서는 가장 먼장!
relative와 absolute
의 관계를 정확하게 이해해야한다.
CSS position에서 relative === 부모 absolute === 자식 인 것만 기억하자!
부모 -> relative
자식 -> absolute
자식은 부모가 없으면 태어날 수도 없었다. 따라서 absolute는 relative가 있어야 자기 기능을 한다.
relative는 position default(static) 값과 유사한데 그냥 left, right, top, bottom 속성을 사용할 수 있게 해준것... 걍 absolute를 사용을 위함이라고 봐도 될 듯
left, right, top, bottom은 기준점에서 얼마나 떨어졌는가
ex) top 위에서 얼마나 아래로 떨어졌는가
그렇다면 여기서 드는 의문점!
어제 clone한 예제에는 relative없이 걍 absolute쓰던데? 라는 생각이 들 수 있다.
<body>의 경우 그 자체적으로 속성을 relative로 가진다. default로 relative를 갖는 태그는 body 뿐이라고 함..
따라서 relative없이 absolute만 사용한다면 그건 <body>를 기준으로 움직이는 것이다.
만약에
<div>부모 --> position : static
<div>자식</div> --> position : absolute
</div>이라면 자식은 집을 나갈 것이다.. absolute는 relative가 필요한데 바로 위 부모에게 relative가 없기 때문. 따라서 relative를 찾을 때까지 쭉쭉 올라간다. relative 속성을 가지는 태그가 없는 경우, 최종 목적지에는 <body>가 있을 것이다.
