2023-10-09 22일차 TIL

2023-10-09 22일차 TIL

CSS 완벽 가이드 (Flexbox, Grid & Sass 포함) : 섹션6 CSS로 요소 배치하기

position 프로퍼티

- position : static 
기본값, 위치를 조정하는 top,right,bottom,left 프로퍼티 사용불가

- position : absolute
 해당요소가 차지하던 자리를 해제하고, 위치는 해당위치에 고정. (position으로 정의된 부모요소 또는 html을 기준으로함)

- position : relative
기본적으로 static 처럼 구조를 무시하진 않지만 본인 요소를 기준으로 위치조정가능.

- position : fixed
해당요소가 차지하던 자리를 해제하고, 스크롤을 해도 해당위치에 고정. (뷰포트를 기준으로함)

- top, right, bottom, left으로 위치 조정
 * Positioning Context : 어느 것을 기준으로 위치를 변경할 지 나타냄

- position을 사용할 시 인라인 블록의 형태로 변경함. 기존에 block, inline 등의 display 속성이 있더라도 무시된다.

- z-index는 요소의 순서를 정하는 프로퍼티이다.
position이 정의된 요소들은 z-index를 지정하여 정의할 수 있다.
position이 정의되지 않은 요소(static)는 z-index가 자동으로 0으로 지정된다./변경불가
동일한 z-index를 가진 요소는 html 선언 순서대로 요소가 나타난다.

-overflow : hidden
요소가 부모요소를 이탈했을때 숨겨준다.
tip. 만약 부모요소가 body라면 css 동작상 html에도 overflow:hidden 프로퍼티가 선언되어야 원하는대로 작동이 된다.

- position : sticky
relative와 fixed를 합친 형태의 position 값으로, 기본적으로 relative처럼 구조를 유지하고 있다가 간격 (top:20 등)을 지정하면 뷰포트를 기준으로 해당부분에서 fixed의 형태를 가진다.
부모 요소가 끝나면 다시 relative의 형태로 돌아간다.