๋์ผํ ์คํ ์ปจํ
์ค๋ ๋ชจ์ ์์๋๋ก ํ์๋๋ฉฐ, ํ์์ ์์๋ ์ด์ ์์ ์์ ํ์๋๋ค.
์ฆ ์ ์ผ ๋ค์ ์ ์ธ๋ ์์๊ฐ ์ ์ผ ์๋จ์ ์์ธ๋ค.
position์ด ์ธํ
๋์ง ์์ผ๋ฉด z-index๊ฐ ์ ์ฉ๋์ง ์๋๋ค.
์ฆ z-index ์ค ์์์๋ position๋ ํจ๊ป ์ค์ผ ํ๋ค.
opacity, transform ๊ฐ์ ๋ช๋ช ์์ฑ์ ๊ฒฝ์ฐ ์ ์ผ ์๋จ์ ์์ธ๋ค.
๋ถ๋ชจ ์์์ z-index ๊ฐ ๋ฎ์ ๊ฒฝ์ฐ ์์ ์์์ z-index๊ฐ ๋๋๋ผ๋ ๋ค๋ฅธ ์์๋ ๋น๊ตํ์ ๋ ๋ ๋ฎ๊ฒ ์์ธ๋ค.
์ฆ, ๋ญ๊ฐ ์ด์ํ๋ค ์ถ์ผ๋ฉด ๋ถ๋ชจ ์์ z-index๋ฅผ ํ์ธํด ๋ณด๋ ๋ง์ด๋ค.

ํ์ฌ ์ผ์ชฝ ํค๋ ๋ด๋ถ์ ์์ฑ๋ ๋ก๊ทธ์์ ๋ชจ๋ฌ์ฐฝ์ ๊ฒฝ์ฐ, z-index๋ฅผ ์ด๋ง๋ฌด์ํ๊ฒ ์คฌ๋๋ฐ๋ ๋ถ๊ตฌํ๊ณ ๋ฉ์ธ ๋ฐ์ค ์์ ์๋ ์ฒดํฌํ ์ ๋ช๋ช ์์๋ฅผ ์ปค๋ฒํ์ง ๋ชปํ๊ณ ์๋ค.
์ด๋ ๋ถ๋ชจ ํ๊ทธ์ธ header๋ก ๊ฐ๋ณด๋ z-index ๊ฐ์ด ๋ฉ์ธ ๋ฐ์ค ์์ ์๋ ์ฒดํฌ๋ ์์์ z-index ๊ฐ ๋ณด๋ค ๋ฎ์ ๊ฐ์ผ๋ก ๋์ด ์์๋ค.
์ด ๋ฌธ์ ๋ 4๋ฒ์ ๊ฒฝ์ฐ์ ํด๋น๋๋ ๊ฒ ๊ฐ๋ค!
.header{
z-index: 3;
position: relative;
}

๋ถ๋ชจ ํ๊ทธ์ธ header์ z-index ๊ฐ์ ์ข ๋ ๋์ฌ ์คฌ๋๋ ๋ค์๊ณผ ๊ฐ์ด ๋ชจ๋ฌ ์ฐฝ์ด ๋ด์ ๋, ๋ชจ๋ฌ์ฐฝ์ด ํ๋ฉด ์ ์ฒด๋ฅผ ์ปค๋ฒํ ์ ์๊ฒ ๋์๋ค.
๋ฌผ๋ก ~~~ ๋ค๋น์ ์ ๋ ๊ฒ ๋ชจ๋ฌ ๋ฌ์๋ ๋๋์ง ์๋๋์ง ์ ๋ชจ๋ฅด๊ฒ ์ง๋ง...์ผ๋จ์...์ฃผ๋จน๊ตฌ๊ตฌ๋ก๋ผ๋ ๋ง๋ค์ด ๋๊ณ ํด๋ฆฐ ์ฝ๋ ํ๋ ์ง ๋ง๋ ์ง ํ์ ^_ใ ...ํ์ด๋ต