06.25(position)

position

 

position 속성은 HTML 요소가 위치를 결정하는 방식을 설정

① 정적 위치(static position) 지정 방식

② 상대 위치(relative position) 지정 방식

③ 고정 위치(fixed position) 지정 방식

④ 절대 위치(absolute position) 지정 방식

---

position 속성

 

속성	설명
position	HTML 요소의 위치를 결정하는 방식을 설정
top	위치가 설정된 조상 요소의 위로부터의 여백을 설정
right	위치가 설정된 조상 요소의 오른쪽으로부터의 여백을 설정
bottom	위치가 설정된 조상 요소의 아래로부터의 여백을 설정
left	위치가 설정된 조상 요소의 왼쪽으로부터의 여백을 설정
z-index	겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정
clip	절대 위치(absolute position) 지정 방식으로 위치한 요소를 자름
cursor	표시되는 마우스 커서의 모양을 설정
overflow	내용(content)의 크기가 해당 요소의 박스(box)를 넘어갈 때 어떻게 처리할지를 설정
overflow-x	내용(content)의 크기가 해당 요소의 수평 방향으로 박스(box)를 넘어갈 때 어떻게 처리할지를 설정
overflow-y	내용(content)의 크기가 해당 요소의 수직 방향으로 박스(box)를 넘어갈 때 어떻게 처리할지를 설정

 

static position

 

가장 기본적인 방식은 정적 위치(static position) 지정 방식

position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않음

단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식

 

 

relative position

 

HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식

HTML 요소의 기본 위치란 해당 요소가 정적 위치(static position) 지정 방식일 때 결정되는 위치를 의미

 

 

fixed position

 

 뷰포트(viewport)를 기준으로 위치를 설정하는 방식

즉, 웹 페이지가 스크롤 되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치함

 

 

absolute position

 

고정 위치가 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작함

단지 뷰포트(viewport)를 기준으로 하는 것이 아닌 위치가 설정된 조상(ancestor) 요소를 기준으로 위치를 설정

하지만 위치가 설정된 조상(ancestor) 요소를 가지지 않는다면, HTML 문서의 body 요소를 기준으로 위치를 설정하게 됨

 

 

정적 위치(static position) 지정 방식과 다른 방식들과의 차이점

 

전부 어떤 기준에 대해 해당 요소의 상대적인 위치를 설정하는 방식임

- 상대 위치(relative position) : 해당 요소가 정적 위치 지정 방식일 때의 위치에 상대적으로 위치함

- 고정 위치(fixed position) : 뷰포트(viewport)에 상대적으로 위치함

- 절대 위치(absolute position) : 위치가 설정된 바로 상위의 조상(ancestor) 요소에 상대적으로 위치함

 

 

z-index 

 

HTML 요소의 위치를 설정하게 되면 어떤 요소들은 설정된 위치 및 방식에 따라 서로 겹칠 수도 있음

z-index 속성은 이렇게 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정

스택(stack)의 순서는 양수나 음수 모두 설정할 수 있으며, 크기가 클수록 앞쪽에 위치하고 작을수록 뒤쪽에 위치함