CSS_position

position : 요소의 위치를 잡아주는 속성

겹치려고 사용
나중에 써놓은 요소가 위에 나온다.

1. 구조 설계시 가장 중요
2. 특이점: 상속 안 됨
3. float보다 위에 떠있음.

• 속성
  1. static : 기본값. (땅에 붙어있음)
  2. ★relative : 위치를 지정
     • 별도의 하위 속성과 함께 쓰인다.
     • 하위 속성없이 사용시에는 static과 동일(움직임이 없음)
     • 주로 특정 요소(자기 포함(혹은 자식))의 기준점을 잡아주는 역할
       ---> 원 기준점에서 이동
     • relative는 내 기준점을 잡아놓고 띄우는거라 하위에 있는 영역이 침범하지 않는다.
  3. ★absolute : 위치를 지정
     • 상위 요소중에 기준점을 잡아줄 수 있는 요소를 기준으로 이동한다.
       ---> 상위 요소의 (0, 0) 기준으로 이동. (margin도 무시)
       ---> 부모가 기준점을 못잡아주면 부모의 부모의 기준값을 잡는다.
       ---> 부모가 기준값을 갖는 방법 : position: relative;
       ---> body기준으로 absolute하는 경우는 드물다. 부모에 relative를 거는걸 공식화해서 사용하자.
     • 주로 겹치거나 움직임이 필요할 때 사용
  4. fixed : 브라우저(body) 기준으로 고정 (꼭 기억하자)
     • 상위 요소가 relative 를 가지고 있어도 무시
     • ex) 오늘 본 상품, 메뉴 (스크롤 움직여도 따라다님)
     • 부모기준으로 영역값을 가지고 있지 않는다.
• 하위속성
  1. 사방값: top, right, bottom, left (필수 사용)
     • 해당 방향에서 얼마 떨어져라 -> top: 50px
     • 단위 : px, %
  2. z-index: 레이어의 순서 결정(옵션. 자주 사용. )
     • 단위 : 정수(무한대~무한대)
     • 기본값: 0.몇 이라고 생각하자 (position을 사용했다는 것 자체가 땅에서 띄운 거니까 0이라고 생각하긴 애매함.)
     • 숫자가 클 수록 위에 뜸
     • 연속되는 숫자 쓰지 말기(도중에 숫자를 수정해야 할 때 곤란한 상황이 나타날 수 있음.)
     • z-index가 안먹는 경우도 았다. 다른 부모 자체의 위치가 높으면 z-index를 아무리 줘도 먹지 않는다.
       ex) fixed한 헤더에서 펼쳐지는 메뉴가 메인에 먹히는 경우 부모에게 z-index를 줘야 한다.

---

• float은 영역이 없으니 margin 0 auto가 먹지 않지만, position은 영역 잘 설정해놓으면 먹음

• px단위로 이동

• 자식한테 absolute 들어있을 때 부모한테 relative를 보통 주지만, 이미 부모에게 absolute가 들어있을 때는 별도로 주지 않아도 된다. (absolute도 자식의 기준점을 잡을 수는 있다.

• position 양옆으로 값 주고(left : 100px; right : 100px;) text-align-center 주면 가운데정렬 가능

• position : fixed; 를 하면 body가 기준이 된다.
  그래서 width : 100%를 하면 부모기준 100%가 되니까 body의 100%가 된다.

• position: fixed를 주면 width는 필요한 크기만 잡음. 그래서 width값 줘야함.
  그리고 아래에 있는 영역들이 올라와서 겹쳐짐.
  position은 하늘에 뜨니까 크기를 못잡는거임.
  그래서 한겹쌓아서 땅에 놓거나, 같이 position 주거나, 주위에 있는 것들 margin이나 padding으로 위치 잡으면 됨.
  margin으로 주는 것이 좋은 이유는 position으로 위치를 옮기면 wrap가 height값을 잡을 수가 없어서 나중에 web2를 사용할 수가 없다.
  margin으로 주면 땅에 붙어있어서 height값을 wrap이 잡을 수 있다.

• 부모가 padding값을 가지고 있어서 자식이 padding만큼의 공간을 차지하고 싶을 때는 position을 주면 된다.

  position: absolute;
  left: 0;
  top: 100%; 
  width: 100%;

• 부모기준 위치에서 부모 바로 밑에 와야하니까 top: 100%를 주고, position쓰면 width값 부모기준으로 잡을 수 있으니 width 100%를 잡으면 된다.

• 아이콘은 한 사진에 몰아놓고 잘라쓴다.
  background-position: x축 y축

---

사방값 - top, left, bottom, right

• position이 적용되는 요소에서만 사용가능(position: static일때 적용x (기본값))
• position을 줄 때 이동할 사방값 중에 제일 가까운 곳을 확인해서 이동하는 것이 좋다.
• 마진같은 느낌임. 방향쪽으로 이동x 방향에서 떨어진다o
  • 오른쪽 끝, 부모 바깥에 주고 싶으면 : left: 100%;
• right로 값을 줄 땐 기준점이 오른쪽 위이다.
  • 오른쪽 끝, 부모 바깥에 주고 싶으면 : right: -100px;
• 방향 끝에 줄 때 해당 방향 기준으로 값을 주는 것이 좋다.
  • 오른쪽 끝, 부모 바깥 : right: -100px; 왼쪽 끝, 부모 바깥 : left: -100px;
• %로 줄 때는 부모기준.
• 방향값을 한 번 주게 되면 그 쪽 방향으로만 움직여야 한다.
  • 만약 그러기 번거롭다면 처음 준 방향 auto로 주고 바꾸려는 방향 값 주면 된다.
    right: 10px;
    -> right: auto; left: 10px;

---

• position으로 center 값을 주려면 -> calc(50% - (내사이즈 / 2))를 주면 된다.

• 크기를 지정하지 않아도(width, height) 값을 주는 방법

  position: absolute;
  top: 50px;
  left: 50px;
  right: 50px;
  bottom: 50px;

  위 소스는 사이즈를 묶지 않은 경우만 가능하다.
  만약 위에 사이즈를 고정해놓는 경우 해당 사이즈의 박스를 위 position만큼 움직인다.

• position을 쓰고 static인 경우와 relative는 안써도 되지만 (자기 자리니까)
  absolute는 사방값을 별도로 무조건 줘야하나, 실무를 하다보면 안주는게 더 편할 수 도 있다.
  사방값을 주지 않는다면 맨 위 맨 왼쪽을 주거나 원래 있어야 할 지점에 있는 경우도 있다.
  (편법)
  위에 padding으로 위치 잡아주고, 밑에 absolute를 주면 위에 있는 요소의 바로 밑에 붙을 수 있기 때문에 이 경우네는 사방값을 안주는 것이 편하다.
  그러나 위 경우에는 아래 padding은 인식하지 않고 바로 밑에 붙기 때문에 주의!