▷ sticky position
| 요소를 Normal Flow에 따라 배치한다 요소가 일반적인 문서 흐름에 따라 배치되다가 스크롤이 특정 임계점에 도달하면 그 위치에 고정된다(fixed로 바뀜) 만약 다음 sticky 요소가 나오면 sticky 요소가 이전 sticky 요소의 자리를 대체한다 (이전 sticky요소가 고정되어 있던 위치와 다음 sticky 요소가 고정되어야 할 위치가 겹치게 되기 때문이다) |
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 1800px;
}
.sticky {
position: sticky;
top: 0;
background-color: rgb(227, 173, 230);
padding: 20px;
border: 2px solid black;
}
</style>
</head>
<body>
<h1>Sticky positioning</h1>
<div>
<div class="sticky">1번 Sticky</div>
<div>
<p>An apple is delicious1</p>
<p>An apple is delicious2</p>
<p>An apple is delicious3</p>
</div>
<div class="sticky">2번 Sticky</div>
<div>
<p>An apple is delicious4</p>
<p>An apple is delicious5</p>
<p>An apple is delicious6</p>
</div>
<div class="sticky">3번 Sticky</div>
<div>
<p>An apple is delicious7</p>
<p>An apple is delicious8</p>
<p>An apple is delicious9</p>
</div>
<div class="sticky">4번 Sticky</div>
<div>
<p>An apple is delicious10</p>
<p>An apple is delicious11</p>
<p>An apple is delicious12</p>
</div>
</div>
</body>
</html>
'WEB > CSS_ concepts' 카테고리의 다른 글
| CSS Flexbox (0) | 2024.03.07 |
|---|---|
| z-index (0) | 2024.03.07 |
| Fixed Position (0) | 2024.03.07 |
| Absolute position (0) | 2024.03.07 |
| Relative position (0) | 2024.03.07 |