[CSS] CSS 포지셔닝

CSS 포지셔닝: CSS를 통해 웹 문서 요소를 화면에 적절히 배치하는 것

box-sizing

박스 모델의 너비 값 기준 지정

box-sizing: <값>

• content-box: width 속성 값을 콘텐츠 영역 너비 값으로 사용(디폴트)
• border-box: width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용

position

요소의 위치 지정 기준

position: <값>

• static : 기준 없음(디폴트)
• relative : 요소 자신을 기준
• absolute : position 속성을 가진 가장 가까운 상위 요소 기준(문서의 흐름에서 제외)
• fixed : 뷰포트(브라우저) 기준(문서의 흐름에서 제외, 스크롤에 이동x, 웹문서 헤더에 사용)
• sticky : 스크롤 되는 상위 요소를 기준으로 오프셋 적용, 스크롤 이동o, 자신의 정해진 위치에 도달하면 거기에 고정

position 속성 값으로 absolute,fixed가 지정된 요소는 display 속성이 block로 변경된다

요소 쌓임 순서(Stack order)

1. position속성이 있는 경우(기본값 static 제외)
2. z-index 숫자가 높을 경우
3. HTML의 다음 구조일 경우

z-index

같은 Stacking context안에서 형제들간의 쌓이는 순서 결정
positon 값이 있어야 동작(기본값 static 제외)

z-index: auto | <값>

Stacking context(쌓임 맥락)

• position이 있는 태그들은 stacking context라는 것을 생성
• 쌓임 맥락은 부모 엘리먼트의 쌓임 맥락을 구성하는 하나의 단위
• 자식 요소들의 z-index 속성 값은 오로지 부모 안에서만 의미를 가짐

z-index가 동작하지않는 이유 4가지 (그리고 고치는 방법)

visibility

특정 요소를 화면에 보이거나 보이지 않게 설정

visibility: <값>

• visible: 화면에 표시(디폴트)
• hidden: 화면에서 숨김, 크기는 그대로 유지(배치에 영향)
• collapse: 표의 행, 열 등에서 서로 겹치도록 조절

HTML 요소 숨기기
display: none; : 레이아웃 내에 존재x
visibility: hidden; : 레이아웃 내에 존재