fixed&sticky

๐Ÿ“„ position: fixed;

์š”์†Œ๋ฅผ ์ผ๋ฐ˜์ ์ธ ๋ฌธ์„œ์˜ ํ๋ฆ„์—์„œ ์ œ๊ฑฐํ•˜๊ณ , ์ง€์ •๋œ ์œ„์น˜์— ๊ณ ์ •์‹œํ‚ต๋‹ˆ๋‹ค.

.pos {
  position: fixed;
  top: 50px;
  left: 50px;
}

์œ„์—์„œ๋ถ€ํ„ฐ 50px ์™ผ์ชฝ์—์„œ๋ถ€ํ„ฐ 50px ๋–จ์–ด์ง„ ์ž๋ฆฌ์—์„œ ์›€์ง์ด์ง€ ์•Š๋Š”๋‹ค.

๐Ÿ“„ position: sticky;

์š”์†Œ๋ฅผ ์ผ๋ฐ˜์ ์ธ ๋ฌธ์„œ ํ๋ฆ„์— ๋”ฐ๋ผ ๋ฐฐ์น˜ํ•˜๊ณ , ์Šคํฌ๋กค(roll)๋˜๋Š” ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ์ƒ์œ„ ์š”์†Œ์— ๋Œ€ํ•ด ์˜คํ”„์…‹์„ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค.

.pos {
  position: sticky;
}

์Šคํฌ๋กค ์ด๋™์œผ๋กœ ์š”์†Œ๊ฐ€ ์›€์ง์—ฌ๋„ ์Šคํ‹ฐํ‚ค ์š”์†Œ๋Š” ๊ณ ์ •๋œ ์ƒํƒœ๋ฅผ ์œ ์ง€ํ•œ๋‹ค.

์ถœ์ฒ˜

  • ์œ ๋…ธ์ฝ”๋”ฉ

Leave a comment