6강 CSS 요소 배치하기 (유데미 강의, max 선생님)

positioning

기본값은 static

이외에도 여러가지 설정값이 존재한다

위치를 변경하려면 기본값인 static을 사용해서는 안된다

 

fixed: 원래 문서 대열에서 제외시킨다(다른 요소들의 입장에서는 없는 것처럼 느껴진다), 그리고 요소를 인라인-블록 요소로 변경시킨다, top,left 같은 프로퍼티를 쓸경우 뷰포트를 기준으로 설정된다 (스크롤을 하면 따라 내려옴)

 

z-index

화면상 x,y축이 아닌 z축 즉, 요소가 겹쳤을떄 어느 것이 위로 올지를 결정하기 위해 사용. static에서는 사용불가, 음수면 뒤로, 양수면 앞으로 (숫자 크기에 따라 상대적) 값이 같을 경우 코드상 아래에 위치한 요소가 위로 옴

 

absolute: 뷰포트가 아닌 html을 기준으로 위치가 결정됨 (부모 요소에 position이 없을 경우, 있다면 해당 부모 요소를 기준) (스크롤을 해도 따라 내려오지 않음)

 

relative: 요소 자체의 위치를 기준으로 위치를 변경함, fixed,absolute와 다르게 문서 배열에서 제외되지 않음 (원래의 요소가 차지했던 공간을 여전히 차지하고 있음, 이동한 요소는 공간차지 안함), absolute를 쓰기 위해 부모 요소에 주로 사용하기도 함

 

overflow: hidden으로 설정하면 위치 이동시 부모 요소를 벗어나면 요소를 숨김처리함

주의: body 요소에 overflow를 추가하면 자동으로 html요소로 옮겨짐, 그래서 html과 body 둘다에 overflow를 넣어야 함 (css의 기본특성이라 어쩔 방법이 없음) 

 

sticky: 스크롤을 하면 fixed처럼 작동, 부모 요소의 내부 콘텐츠 끝부분 공간까지만 표시되고 그 이후로는 사라짐, top으로 뷰포트와의 거리를 설정가능

주의: 최신기능이라 브라우저 지원이 좋지 않음

 

스택 컨텍스트: z-index는 동등한 요소들끼리 비교하기 때문에 자식 요소의 인덱스가 부모의 형제 요소의 인데스 보다 크다고 해서 위로가지 않는다

 

강의,자료, 출처

https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/