Position

position 속성이 가질 수 있는 값
static
fixed
absolute
relative

구체적인 위치지정 속성
top
bottom
left
right

static

---

모든 HTML 태그요소가 가지는 위치 기본값
static으로 지정된 각 요소들은 HTML문서 내에 작성된 순서에 따라 차례대로 위치한다.

레이아웃이 박스를 처음 위치하는 곳에 두는 것

디폴트로 적용됨

Fixed

---

고정의미를 의미
뷰포인트를 기준으로 위치를 정한다
fixed로 지정된 각 요소들은 웹페이지의 사이즈가 변하거나 스크롤이 생겨도 항상 고정된 자리에 위치하게 된다.

absolute

---

body의 맨 오른쪽, 아래, 왼쪽으로 간다 (body를 기준으로 움직임)

부모박스 기준X

(top, bottom, left, right)

부모박스를 기준으로 하고 싶으면 부모를 relative로 만들면 된다

위치가 설정된 (fixed, absolute, relative)조상요소를 기준으로 위치를 지정한다.
위치가 설정된 조상요소가 없다면 요소를 기준으로 한다.

relative

---

조금씩만 오른쪽, 왼쪽으로 옮기고 싶을 때

유용할 때가 있다

(top, bottom, left, right)

element가 처음 위치한 곳을 기준으로 수정

“엘리먼트가 처음 놓인 자리에서 상하자우로 움직인다” - 첫 기준점이 중요

상대적 위치를 의미
현재위치(기본위치)를 기준으로 위치를 지정한다.