position

position: 위치 지정
-absolute: 절대 주소 / 기준: 부모
-fixed: 고정된 주소 / 기준: 왼쪽 상단(0,0)
-relative: 상대주소 / 기준: 자기 자리

 

※자식 태그에 position을 설정하려면 부모 태그에도 position이 있어야 한다 (부모 position: relative)
없으면 자식 태그들은 부모를 벗어난다.

 

position 사용하면

1. top. left, right, bottom 사용 가능 이걸로 위치 잡기 가능

 

2. z-index 사용 가능 / 레이어 개념 / 위, 아래 설정(레벨) 위, 아래가 덮어쓰기 개념이라고 보면됨 

 

---

absolute, fixed 사용하면 위치를 지정했기 때문에 공중에 붕 뜬다

 

---

absolute 사용시 중간정렬 하고싶으면 

position: absolute top: 50% left: 50%

transform: translate(-50%, -50%);