Position

• 보통 우리는 브라우저에서 태그의 위치를 변경할때 margin값을 많이 사용한다. 하지만 margin 값은 normal flow를 벗어나지 않고 변경된 자신의 위치를 다른 tag들이 인식해서 겹쳐지지 않기때문에 모달창 같이 겹쳐져야할 필요가 있는 경우 다른 방법이 필요하다. 따라서 이번 글에서는 Position을 배워보도록 하자.
• position이란 HTML 태그의 위치를 지정해주는 속성이다. position 속성을 이용해 우리는 페이지의 레이아웃을 결정할 수 있다.

  normal flow: 일반적인 HTML 흐름, 태그들의 위치가 다른 태그들을 고려하여 위에서 아래로 쌓이면서 구축되는 것

Position 종류

• static
• relative
• absolute
• fixed

position(static)

• position(static): 모든 태그들은 별도 지정 없으면 static값을 가진다. 즉 html에 쓴 태그 순으로 정상적인 흐름(normal flow-위에서 아래로)에 따라 위치가 지정된다.
  position : static

position(relative)

• 단어 자체의 뜻처럼 '상대적'인 속성을 가지고 있다. static, 원래 자신이 있어야 하는 위치에 상대적인 의미이며 relative는 자신이 원래 있던 자리를 기억한다..
• position: relative속성을 사용하면 주로 left, right, top, bottom: “ “ px; 를 같이 사용하며, static의 위치에서부터 얼마나 떨어져 있는 지를 정할 수 있다.
• normal flow를 벗어나지 않는다.즉, static의 위치를 차지하고 있다고 인식되며, left나 top과 같은 속성으로 움직인 위치가 다른 요소들에 영향을 주지 않는다.
• 기본적으로 position이 있는 애가 없는 애를 가린다.

position(absolute)

• ‘절대적인’값을 가진다. 움직이는 기준 값이 부모의 요소를 기준으로 움직인다. 만일 없으면 html의 root요소인 html태그를 기준으로 잡는다 > 왼쪽 상단의 (0,0)
• 단, 부모의 요소가 position: relative일때 부모 요소의 위치를 기준으로 absolute위치를 잡는다.
• position absolute는 normal flow를 벗어날 수 있다. >> 자신의 원래 static을 기억해서 위치를 빈 공간으로 차지해 있지 않는다.

  • 사실 html의 공간은 3차원이다. 그림 표시를 2차원으로 보여 것.
  • 포지션 속성은 잘 사용하지 않는다.
    이유: 위치를 지정하기 위해서 써야하는 문법이 많기 때문이다.

position(fixed)

• 검색웹의 검색창처럼 스크롤을 올리거나 내려도 움직이지 않고 고정돼있어야 할 경우 필요하다.
  현재 사용자가 사용하고 있는 브라우저를 기준(viewport)으로 계속 위치한다.

position(sticky)

• ‘끈적끈적한’ 속성 값이 적용된 요소는 조상에 스크롤이 있다면 가장 가까운 부모 요소에 달라붙는다(대체한다, 바뀐다).

---

position 끼리의 우선 순위

• 그렇다면 만일 position끼리 위치가 겹치는 상황에서는 어떡할까? 실제로 position을 사용하다 보면 내가 원하는 요소가 앞으로 오지 않고 뒤에 오는 경우도 생긴다. 이를 방지하기 위해서 z-index속성이 필요하다. 앞서 웹은 3차원 공간이라고 표현했는데 바로 3차원 축인 z축의 값을 높게 줄 수록 표면 위로 떠오르게 할 수 있다.

z-index

• z-index
  웹은 3차원 공간이므로 x,y축 뿐만 아니라, z축이란 게 존재한다. position을 사용하면 요소와 요소가 겹치는데 이때 어떤 요소를 앞으로 보이게 할 지 정할 수 있다. static을 제외하고 오로지 position 속성값이 적용된 요소의 Z축 순서를 결정할 수 있으며, z-index값이 더 크면 다른걸 덮어씀.
  단, 부모의 z-index값을 높여서 자식 요소들 덮을 수 없다.