display:none;, position, z index

div {
 	display: none;
    }

-> 레이아웃에서 제외

div {
	visibility: hidden;
}

-> 숨겨짐 (공간은 남아있음)
visible;이 기본 값

div {
	visibility: hidden;
    opacity: 0;
}

: 완전 숨김처리 가능 ( opacity : 불투명도 (0~1) )

---

position : 차지한 영역 (CSS)

기본값 - static;(사람)

1. absolute; (유령)
   : 유령의 집 역할 - 겹치기 가능
   : 최소한으로 줄어든다
   : 부모 관계X 자유로워짐
   : 따라오지 않음

2. fixed; (유령)
   : 유령의 집 역할
   : 따라다님 (헤더)

3. relative; (사람)
   : 유령의 집
   : 겹칠 수 없음

4. sticky;
   : 설정한 구간만 따라다님

---

z index : absolute 순서 지정

: 숫자 크기가 클수록 앞으로 나옴 (상대적)

section > div:nth-child(2) {
	background-color: gold;
	top: 10%;
	left: 10%;
	z-index: 101;
}

section > div:nth-child(3) {
	background-color: pink;
	top: 20%;
	left: 20%;
	z-index: 100;
}

-> 2번째 div가 앞으로 나옴

---

정가운데 정렬하는 법

div {
	width: 100px;
	height: 100px;
	background-color: red;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
 or transform: translate(-50%, -50%);
}

top, left 값을 50%를 줘도 왼쪽 상단 모서리에 맞춰지기 때문에
transform을 이용해 완벽히 가운데로 정렬함