๐ฅ Position ์์ฑ ์ค์ต๋งํฌ ( ํด๋ฆญ ! )
Position์์ฑ์ด๋
- position์์ฑ์ ์์์ ์์น๋ฅผ ๊ฒฐ์ ํ๋ ์์ฑ์ด๋ค.
- position์์ฑ์ ๋ค์ด๊ฐ๋ ๊ฐ์ผ๋ก๋ relative, absolute, fixed, static, sticky๊ฐ ์๋ค.
- position ์์ฑ์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋จผ์ position ๊ฐ์ ์ฃผ๊ณ top,bottom,left,right์ ๊ฐ์ ๋ฃ์ด ์ฃผ๋ฉด ๋๋ค.
- ์๋ฅผ ๋ค์ด top: 20px์ ์ฃผ๋ฉด ์์๊ฐ ์์์ 20px๋งํผ ๋จ์ด์ง๊ฒ ๋๋ค.
- ์ด์ ๊ฐ ์์ฑ๊ฐ๋ค์ ํน์ง์ ์ดํด ๋ณด์.
1. relative & absolute
- relative๋ ์ผ๋ฐ์ ์ผ๋ก ๋ถ๋ชจ ์์์ ์ฌ์ฉ๋๋ ์์ฑ์ด๊ณ , absolute๋ ์์์์์ ์ฌ์ฉ ๋๋ค.
- ์๋ฅผ ๋ค์ด A์์๋ฅผ relative๋ฅผ ์ฃผ๊ณ , A์์ ์์์์์ธ B์ absolute๋ฅผ ์ฃผ๋ฉด ์์ B์ top,bottom,left,right์์ฑ์ผ๋ก ์์น๋ฅผ ์ง์ ์ ํ ๋ A์์๋ฅผ ๊ธฐ์ค์ผ๋ก ์์ง์ด๊ฒ ๋๋ค.
- ๋ง์ฝ ๋ถ๋ชจ ์์์ relative๋ฅผ ์ฃผ์ง ์์ผ๋ฉด ๋ธ๋ผ์ฐ์ ๋ฅผ ๊ธฐ์ค์ผ๋ก ์์น๊ฐ ์กฐ์ ๋๋ค.
2. fixed
- fixed๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ๊ธฐ์ค์ผ๋ก ์์น๋ฅผ ์ก๋๋ค.
- fixed๋ฅผ ์ฌ์ฉํ๋ฉด ์์๋ฅผ ๋ฌธ์์ ํ๋ฆ์์ ์ ๊ฑฐ ํ์ฌ ์ง์ ํ ์์น์ ์์๋ฅผ ๊ณ ์ ์ํฌ ์ ์๋ค.
3. static