✔️position Property
- 요소의 위치를 정의한다.
- 요소의 위치는 좌표 프로퍼티 (
top,bottom,left,right) 와 함께 사용 위치를 지정한다.
📌static
- position property의 기본값이다. ( 지정하지 않았을 때와 같다.)
- 기본적인 요소의 배치 순서에 따라 위에서 아래로, 왼쪽에서 오른쪽으로 순서에 따라 배치된다. (자식요소로서 존재할 경우, 부모요소의 위치를 기준으로 배치된다.)
- 설정된 position을 무력화하기 위해 사용될 수 있다.
- 좌표 프로퍼티 (
top,bottom,left,right) 를 같이 사용할 수 없으며, 사용할 경우 무시된다.
📌relative
- 기본 위치를 기준으로 좌표 프로퍼티를 사용하여 위치를 이동시킨다.
- static 과 relative 의 차이점은 좌표 프로퍼티의 동작여부 뿐이다. 그외는 동일하게 동작한다.
📌absolute
- 부모 요소 또는 가장 가까이 있는 조상 요소(static 제외)를 기준으로 좌표 프로퍼티만큼 이동한다.
즉, relative, absolute, fixed 프로퍼티가 선언되어 있는 부모 또는 조상 요소를 기준으로 위치가 결정된다. (만일 부모 또는 조상 요소가 static인 경우, document body를 기준으로 하여 좌표 프로퍼티대로 위치하게 된다.)- absolute 선언 시, block 레벨 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.
📌fixed
- 부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표프로퍼티(top, bottom, left, right)을 사용하여 위치를 이동시킨다.
스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.- fixed 프로퍼티 선언 시, block 요소의 width는 inline 요소와 같이 content에 맞게 변화되므로 적절한 width를 지정하여야 한다.
📌sticky
✔️z-index property
- z-index 프로퍼티에 큰 숫자값을 지정할수록 화면 전면에 출력된다. positon 프로퍼티가 static 이외인 요소에만 적용된다.
✔️overflow property
- overflow 프로퍼티는 자식 요소가 부모 요소의 영역를 벗어났을 때 처리 방법을 정의한다.
| 프로퍼티 값 | 설명 |
|---|---|
| visible | 영역을 벗어난 부분을 표시한다. (기본값) |
| hidden | 영역을 벗어난 부분을 잘라내어 보이지 않게 한다. |
| scroll | 영역을 벗어난 부분이 없어도 스크롤 표시한다. |
| auto | 영역을 벗어난 부분이 있을때만 스크롤 표시 한다. |
- 특정 방향으로만 스크롤을 표시하고자 할대는 overflow-x 또는 overflow-y 프로퍼티를 사용한다.
Reference
End.
I'm SHORRY about that