[html/css] Position에 대하여

html/css에서 position은 중요하다.
안 중요한 내용은 없지만, 결국 html/css의 기본은 layout에 있기 때문에
html 뼈대를 잡아놓고 각 요소를 원하는 위치에 잘 넣는 것은 아주 중요한 과정이다.

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky)
(출처: w3schools)

position 속성은 위 설명 대로, 5가지 값(value)이 있다.

• position:static
• position:relative
• position:absolute
• position:fixed
• position:sticky

기본적으로 static은 default값으로, 위치에 어떤 영향도 주지 않는다.
문서 흐름에 따라 화면에 위치하고 top/left/right/bottom 등 세부 속성을 아무리 줘봤자 적용되지 않는다.

fixed와 sticky는 유사하지만 약간 다른데, 이 2개는 쇼핑몰을 생각해보면 쉽다. 쇼핑몰 사이트를 보면, 아무리 스크롤을 내려도 상단 메뉴바는 고정되어 있다. 혹은 좌측 하단에 팝업창이나 실시간 1:1 상담 아이콘이 고정되어 있는 것을 자주 볼 수 있다. 이는 fixed를 사용한 것이다.

출처:https://attrangs.co.kr, 스크롤을 내려도 우측 하단의 아이콘들은 계속 같은 위치에 fixed되어 있다

sticky는 좀 더 진화된(?) 형태다. 원래 위치에 있는 상태에서, 스크롤을 내리면 top/left/right/bottom 등의 세부속성을 통해 지정된 위치로 이동한 후 fixed 되는 것이다. 그래서 당연히 세부 속성을 작성하는 것은 필수다. 예전에는 간간히 보였던 형태 같은데, 요즘엔 잘 없는 것 같다. (IE에서는 지원하지 않는 속성이라 그런 것도 있다)
https://www.digitalocean.com/community/tutorials/css-position-sticky
(도저히.. 예시 사이트를 찾을 수 없어 tutorial 찾아봄;;;)


어쨌든 위의 속성들도 중요하지만, 가장 중요한 것은 역시 relative와 absolute다.

relative는 요소의 현재 위치(static)을 기준으로 위치를 계산한다.
쉽게 말해, relative를 주고 left:100px을 준다면, 오른쪽으로 100px만큼 이동한다.

그런데 absolute를 주면, 원래 부모 요소에 소속된 위치 대신 문서의 초기값을 기준으로 이동하게 된다. 즉 부모-자식 간의 관계가 끊어지는 건데, 만약 부모 요소에 position:relative가 있다면 부모-자식 간 관계가 유지된 상태로 이동하게 된다.

부모 div안에 자식 div인 box1, box2가 있다고 해보자.

이 상태에서, box1에 position:absolute를 더하면 아래와 같이 변한다.

box2가 갑자기 사라졌는데, 이는 사라진 것이 아니라 box1이 부모 div와의 관계를 끊으면서 둘 째 자식이었던 box2가 첫 째 자식 자리로 이동된 것이다. 현재 box1은 문서의 초기값 위치로 셋팅된 것이다. (맨 좌측 상단)
여기서 box1에게 left:50px을 주면, 오른쪽으로 50px 만큼 이동되고 box2가 다시 보이게 된다. (까꿍!)

요약하자면,
position:relative는

• 자신의 자리(static)에서 이동한다
• top, right, bottom, left를 사용해서 이동시키면 되고, 기존 레이아웃(관계)는 유지된다

position:absolute는

• 부모의 초기값으로 이동하며, top/right/bottom/left랑 같이 쓸 경우 웹 화면 초기점에서 이동한다
• 만약 부모에게 position:relative 를 주면 top/right/bottom/left랑 같이 써도 부모의 초기점에서 이동한다