📌배치(Position)

요소 위치지정 기준

static(기본값)

top, bottom, left, right, z-index 등 직접 위치값 설정할 수 있음

relative

요소 자신을 기준 (주로 부모에 쓰인다)

absolute

위치 상 부모 요소를 기준

부모요소를 position: relative; 를 주지 않은채 특정자식요소에 position: absolute; 를 사용하게 된다면, 
위치 이동 후 기존 자식들이 그 '특정요소'를 제외하고 위로 밀린다(=주변과의 상호작용이 무너진다.) 
그래서 부모도 함께 넣어줘야한다.

fixed 뷰포트(브라우저)를 기준

• 부모, 조상 위치를 무시하고 뷰포트(브라우저)를 기준으로 배치된다.
• 함께 body 사이즈를 지정해줘야한다.
• 스크롤을 움직여도 그 자리에 고정되어 있다.
• 주로 홈페이지를 만들 때 상단 로고에 쓰인다.
  

---

요소 쌓임 순서(Stack order)

어떤 요소가 사용자와 더 가깝게 있는지 (위에 쌓이는지 결정)

• 요소에 position 속성값이 있는 경우 위에 쌓임(기본값 static 제외)
• 1번 조건이 같은 경우, z-index 속성의 숫자 갑시 높을 수록 위에 쌓임
• 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임
  

---

부모요소
position: relative;

자식1
position: relative;

자식2
position: absolute;
top: 50px;
left: 50px;

------------ 이경우 자식2가 맨위에 위치

z-index가 크면 위에 쌓인다.(기본값 0)

자식 1
position: relative;
z-index: 1;

------------ 자식 1이 맨 위로 간다

자식 3
z-index: 3; 을 넣어도 위에 쌓이지 못함
왜냐하면 position이 없기때문에

• 자식 1, 2와 동일 조건(position 지정) 일 경우에 자식2에 위치값을 지정해주면 맨위로 간다.
• 자식 1, 2와 동일 조건(position 지정) 일 경우에 자식1에 z-index 값을 지정해주면 맨위로 간다.

---

Z-index

• 요소의 쌓임 정도를 지정

• 기본값은 0 (-1도 사용가능한데 주로 쓰이지 않음)

• 숫자가 높을수록 위에 쌓임

• 요소의 display가 변경됨
  position 속성값으로 absolute, fixed가 지정된 요소는 display 속상이 block으로 변경됨

  • 예시
    span은 기본적으로 가로 세로 값을 가질 수 없는데 css에서 크기 지정 후 display:block; 값을 주게되면 크기가 지정이 된다!
    

---

Quiz

Display 속성이 block 값으로 바뀌지 않는 position 속성의 값은?

1) absolute
2) relative
3) fixed

⚡정답: 2