sticky
스크롤 영역 기준으로 배치
1) position : fixted를 주면 다음 요소를 덮어버림
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="reset.css">
<style>
#s1 ul {background-color: black;}
#s1 li:nth-child(1) {background-color: khaki;}
#s1 li:nth-child(2) {background-color: teal;}
#s1 li:nth-child(3) {backgounrd-color: tan;}
#header {
position: fixed;
height: 70px;
background-color: lightblue;
width: 100%;
color:darkviolet;
font-size: 50px;
font-weight: bold;
text-align: center;}
</style>
</head>
<body>
<header id="header">
<h1>롯데타워</h1>
</header>
<hr>
<section id="s1">
<ul>
<li>서울</li>
<li>부산</li>
<li>제주</li>
</ul>
</section>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
<p>KOREA</p>
</body>
</html>
2) 완성코드
<!DOCTTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="reset.css">
<style>
#s1 ul {background-color: black;}
#s1 li:nth-child(1) {background-color: khaki;}
#s1 li:nth-child(2) {background-color: teal;}
#s1 li:nth-child(3) {background-color: tan;}
#header {
position: sticky;
top:0;
height: 70px;
background-color: brown;
width: 100%
color: aqua;
font-size: 50px;
font-weight: bold;
text-align: center;}
</style>
</head>
<body>
<header id="header">
<h1>롯데타워</h1>
</header>
<hr>
<section id="s1">
<h1>position:sticky</h1>
<ul>
<li>서울</li>
<li>부산</li>
<li>제주</li>
</ul>
</section>
<p>KOREA</P>
<p>KOREA</P>
<p>KOREA</P>
<p>KOREA</P>
<p>KOREA</P>
<p>KOREA</P>
<p>KOREA</P>
<p>KOREA</P>
<p>KOREA</P>
<p>KOREA</P>
<p>KOREA</P>
<p>KOREA</P>
<p>KOREA</P>
<p>KOREA</P>
<p>KOREA</P>
<p>KOREA</P>
<p>KOREA</P>
<p>KOREA</P>
<p>KOREA</P>
</body>
</html>
- sticky를 줄 때, top:0;은 필수사항
'CSS' 카테고리의 다른 글
| [CSS] float (0) | 2024.06.01 |
|---|---|
| [CSS] z-index (0) | 2024.06.01 |
| [CSS] fixed (0) | 2024.06.01 |
| [CSS] relative (0) | 2024.05.31 |
| [CSS] absolute (0) | 2024.05.31 |
