포지션
position
HTML요소가 위치를 결정하는 방식을 설정하는 속성이다.
정적 위치
static position
-
모든 HTML요소의 기본 position 속성이면서 위치를 지정하는 가장 기본적인 방식. 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시킨다.
-
position속성값이static으로 설정된 요소는top,right,bottom,left요소에 영향을 받지 않는다.<style>div{ position: static; }</style>
상대 위치
relative position
-
해당 요소가 정적 위치일 때(기본 위치)를 기준으로 위치를 지정하는 방식.
-
top,right,bottom,left요소로 위치를 움직일 수 있다.
고정 위치
fixed position
-
스크린의 뷰포트(viewport)를 기준으로 위치를 지정하는 방식. 문서의 일반적인 흐름에 따르지 않는다. 즉, 스크롤해도 스크린의 밖으로 나가지 않고 항상 같은 위치를 지킨다.
-
top,right,bottom,left요소로 위치를 움직일 수 있다.
sticky position
- 정적 위치처럼 배치되지만 스크롤이 임계점이상 움직여서 (이 속성을 가진 요소가) 보이지 않게 될 때부터는 고정 위치처럼 스크롤을 따라서 내려간다.
- 다른 속성과는 다르게
top요소로만 위치조정이 가능하다.
절대 위치
(absolute position)
-
고정 위치가 뷰포트를 기준으로 설정하는 것 처럼 위치가 설정된 가장 가까운 부모 요소의 위치를 기준으로 위치를 지정하는 방식.
-
위치가 설정된 요소란,
position속성이static이 아닌reletive,absolute,fixed중 하나인 요소고, 부모 요소중 위치가 지정된 요소가 없다면 맨위의 태그인<body>태그를 기준으로 위치를 지정한다. -
top,right,bottom,left요소로 위치를 움직일 수 있다.
z-index
-
HTML에서 여러 요소들의 위치를 지정하다 보면 요소끼리 겹칠 수 있는데, 이렇게 겹쳐지는 요소들이 쌓이는 스텍(stack)을 지정한다.
-
스텍의 순서는 양수와 음수 둘다 가능하며 크기가 클수록 앞에 배치하고 작을수록 뒤에 배치한다.
Overflow
| 속성 | 설명 |
|---|---|
| overflow | 내용(content)의 크기가 해당 요소의 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함. |
| overflow-x | 내용(content)의 크기가 해당 요소의 수평 방향으로 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함. |
| overflow-y | 내용(content)의 크기가 해당 요소의 수직 방향으로 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함. |
