[CSS] position, z-index

Position

➡️ 요소의 위치를 결정하기 위한 속성

➡️ 기능을 의미하는 position 속성 값 : static, relative, absolute, fixed

➡️ 위치 값을 설정하는 속성 : top, left, right, bottom

➡️ 앞/뒤의 배치를 설정하는 속성 : z-index

---

position

• static - 가장 기본이 되는 값으로 위치를 설정하는 속성(top, left, right, bottom)과 z-index 기능이 동작하지 않음
• relative - 자신을 기준으로 처리하는 속성으로, 위치를 설정하는 속성을 사용하더라도 주변 요소들에 영향을 미치지 않음 — top right left bottom 값 지정하면 원래위치로부터 얼마나 떨어져 있을지 설정 가능
• absolute - 부모/조상의 속성 중 position으로 처리되어 있다면(static 제외) 해당 속성을 가진 요소를 기준으로 하고, 없다면 브라우저 화면을 기준으로 위치함
• fixed - 브라우저를 기준으로 처리 (z-index의 경우는 부모/조상의 요소에 따라 다름)

위치 설정

• top, left, right, bottom - 해당 요소의 각 위치를 기준 (top일 경우 상단을 기준, bottom일 경우 하단을 기준)으로 지정된 곳에서 위치를 설정
• top bottom / left right 동시 지정 불가
  • cf) top : 0 ; bottom : 0 ; left : 0 ; right : 0; margin : auto ; ⇒ 화면 상 중앙 영역에 위치하게 됨

z-index

• 단위는 없이 수치로 구분 (수치가 높을수록 앞으로, 낮을수록 뒤로 이동) ⇒ 레이어 개념이랑 비슷
• 단, 부모/조상의 위치에서 z-index를 적용으로 처리되는 경우 범위가 제한된다. 부모의 위치에 종속