TIL - position : Fixed, sticky

์†Œ๋ฐยท2022๋…„ 4์›” 11์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
12/17
post-thumbnail

๐Ÿ“Œ fixed

  • ์Šคํฌ๋กค์— ๊ด€๊ณ„์—†์ด ํŠน์ • ๋ฐ•์Šค๊ฐ€ ๊ณ ์ •๋˜์–ด ์›€์ง์ด์ง€ ์•Š์Œ
  • ํŽ˜์ด์ง€๊ฐ€ ์Šคํฌ๋กค ๋˜์–ด๋„ ๋ณด์—ฌ์ค„ ์ค‘์š”ํ•œ ์ •๋ณด๋ฅผ ํ™”๋ฉด์— ๋…ธ์ถœํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ (nav bar)
 .nav {
            font-family: 'Pacifico', cursive;
            position: fixed;
            padding: 10px;
            background-color: brown;
            color: white;
            font-size: 28px;
            width: 100%;
            height: 45px;
        }

๐Ÿ“Œ sticky

  • ์Šคํฌ๋กค ์ด๋™์œผ๋กœ ์š”์†Œ๊ฐ€ ์›€์ง์—ฌ๋„ sticky ์š”์†Œ๋Š” ๊ณ ์ •๋œ ์ƒํƒœ๋ฅผ ์œ ์ง€.
  • ์Šคํฌ๋กค ์ด๋™ํ•˜๋‹ค๊ฐ€ ์ •ํ•ด์ง„ ์œ„์น˜์—์„œ ๋‹ฌ๋ผ๋ถ™๋Š”๋‹ค.
h2 {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            background: greenyellow;
        }
 aside {
            border: solid 1px black;
            float: left;
            width: 200px;
            height: 800px;
            padding: 20px;
            /* fixed๋กœ ๊ณ ์น˜๊ณ  ๊ทธ ์ฐจ์ด๋ฅผ ์„ค๋ช…ํ•ด๋ณด์„ธ์š”. */
            position: sticky;
            top: 50px;
        }

๐Ÿ“Œ z-index

  • position:static;์ด๋ฉด z-index ์‚ฌ์šฉ๋ถˆ๊ฐ€
  • z-index๋Š” ์ž์‹ ์ด ์žˆ์–ด์•ผํ•˜๋Š” ์œ„์น˜์— ์ƒ๋Œ€์ ์ธ ๊ฐ’์„ ๊ฐ€์ง.
  • ๋‹จ, ๋ถ€๋ชจ๊ฐ€ z-index๋ฅผ ๋†’์—ฌ ์ž์‹ ์•ž์œผ๋กœ ๋‚˜์˜ฌ ์ˆ˜ ์—†์Œ.
    ์ž์‹์ด z-index๋ฅผ ๋‚ฎ์ถฐ ๋ถ€๋ชจ ๋’ค๋กœ ๊ฐ€๋Š” ๊ฒƒ์€ ๊ฐ€๋Šฅ.
    ์ฆ‰ ๋ถ€๋ชจ๊ฐ€ ๋งจ ์•ž์— ์žˆ์„ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ ์ž์‹์ด ๋ถ€๋ชจ ๋’ค๋กœ ๊ฐ€๋Š” ๋ฐฉ๋ฒ•๋ฟ !
profile
์ƒ๊ฐ์ด ๊ธธ๋ฉด ์šฉ๊ธฐ๋Š” ์‚ฌ๋ผ์ง„๋‹ค.

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