๐ 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;
position: sticky;
top: 50px;
}
๐ z-index
position:static;
์ด๋ฉด z-index ์ฌ์ฉ๋ถ๊ฐ
- z-index๋ ์์ ์ด ์์ด์ผํ๋ ์์น์ ์๋์ ์ธ ๊ฐ์ ๊ฐ์ง.
- ๋จ, ๋ถ๋ชจ๊ฐ z-index๋ฅผ ๋์ฌ ์์ ์์ผ๋ก ๋์ฌ ์ ์์.
์์์ด z-index๋ฅผ ๋ฎ์ถฐ ๋ถ๋ชจ ๋ค๋ก ๊ฐ๋ ๊ฒ์ ๊ฐ๋ฅ.
์ฆ ๋ถ๋ชจ๊ฐ ๋งจ ์์ ์์ ์ ์๋ ๋ฐฉ๋ฒ์ ์์์ด ๋ถ๋ชจ ๋ค๋ก ๊ฐ๋ ๋ฐฉ๋ฒ๋ฟ !