[CSS] position:fixed์™€ sticky

Mooongsยท2022๋…„ 4์›” 18์ผ
2

ํ”„๋ก ํŠธ์—”ํŠธ์Šค์ฟจ

๋ชฉ๋ก ๋ณด๊ธฐ
13/28
post-thumbnail

ํ™”๋ฉด ์ƒ๋‹จ์˜ nav๋ฅผ ํฌํ•จํ•œ header๋‚˜ ์Šคํฌ๋กค์„ ๋‚ด๋ฆฌ๋ฉด ํ™”๋ฉด ์ƒ๋‹จ์œผ๋กœ ์˜ฌ๋ผ๊ฐ€๊ฒŒ ํ•˜๋Š” ๋ฒ„ํŠผ ๋“ฑ์˜ ์œ„์น˜๊ฐ€ ๊ณ ์ •๋˜์–ด ์žˆ๋Š” position : fixed ๊ธฐ๋Šฅ์€ ํ”ํžˆ ๋ณด์—ฌ ์•Œ๊ณ  ์žˆ์—ˆ๋Š”๋ฐ position : sticky ์†์„ฑ์€ CSS ์ˆ˜์—…์„ ๋“ค์œผ๋ฉฐ ์ฒ˜์Œ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์˜ค๋Š˜์€ ์ด ๋‘˜์˜ ์ฐจ์ด๋ฅผ ๋น„๊ตํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค.


๐Ÿ“ position ์†์„ฑ์˜ ์—ญํ• 

  • ๋ฌธ์„œ ์ƒ์—์„œ ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ •์˜ํ•œ๋‹ค.
  • ๊ธฐ๋ณธ๊ฐ’์€ position : static์œผ๋กœ, ์ผ๋ฐ˜์ ์ธ html ๋ฌธ์„œ์˜ ํ๋ฆ„๋Œ€๋กœ ์š”์†Œ๋ฅผ ๋ฐฐ์น˜ํ•˜๋Š” ๋ฐฉ์‹์„ ์˜๋ฏธํ•œ๋‹ค.

๐Ÿ“Œ position : fixed

  • ์ผ๋ฐ˜์ ์ธ ๋ฌธ์„œ ์ˆœ์„œ๊ฐ€ ์•„๋‹Œ, ํ™”๋ฉด ๋‚ด ์ง€์ •๋œ ์œ„์น˜์— ๊ณ ์ •์‹œํ‚จ๋‹ค.
  • ์Šคํฌ๋กค์„ ๋‚ด๋ ค๋„ ์›ํ•˜๋Š” ์œ„์น˜์— ๊ณ ์ •๋˜์–ด ์žˆ๋‹ค.



๐Ÿ“Œ position : sticky

  • ์ง€์ •ํ•œ ์Šคํฌ๋กค ์œ„์น˜์— ๋„๋‹ฌํ•˜๊ธฐ ์ „๊นŒ์ง€๋Š” static ์†์„ฑ์ฒ˜๋Ÿผ ํ–‰๋™ํ•˜๋‹ค๊ฐ€ ๋ทฐํฌํŠธ ๊ธฐ์ค€์œผ๋กœ ์ •ํ•ด๋†“์€ offset์— ๋‹ฟ์œผ๋ฉด fixed์ฒ˜๋Ÿผ ๊ณ ์ •๋œ๋‹ค.
  • top, bottom, left, right ์ค‘ ํ•˜๋‚˜๋ฅผ ํ•„์ˆ˜์ ์œผ๋กœ ์ง€์ •ํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค. (=offset)
  • ์ฝ˜ํ…์ธ ๋งˆ๋‹ค ๋‹ค๋ฅธ ์ •๋ณด๋ฅผ ๊ณ ์ •ํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์†์„ฑ์ด๋‹ค.
  • IE์—์„œ ์ง€์›๋˜์ง€ ์•Š๋Š” ๊ธฐ๋Šฅ์ด๋‹ค. (caniuse ์‚ฌ์ดํŠธ)

  • ๋ถ€๋ชจ ํ˜น์€ ์กฐ์ƒ ์š”์†Œ์— overflow ์†์„ฑ์ด ์ง€์ •๋˜์–ด ์žˆ์œผ๋ฉด sticky ์†์„ฑ์ด ์ž‘๋™ํ•˜์ง€ ์•Š์œผ๋‹ˆ offset์„ ์ง€์ •ํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ๊ณผ ๋”๋ถˆ์–ด ์œ ์˜ํ•ด์„œ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค!
profile
#FE๊ฐœ๋ฐœ์ž๐Ÿฃ #์ƒˆ๋กœ์šด๊ฑด #์งœ๋ฆฟํ•ด

0๊ฐœ์˜ ๋Œ“๊ธ€