position 2편 fixed sticky
position
- 문서 상에 요소를 배치하는 방법을 정의 (top, bottom, right, left)
- fixed : 일반적인 문서 흐름 X, 지정 위치 고정 (스크롤해도 고정)
- sticky : 일반적인 문서 흐름, 스크롤되는 가장 가까운 상위 요소에 대한 오프셋 적용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>position 2</title>
<style>
.pos{
width: 200px; height: 200px;
background-color: tomato;
position: sticky;
top: 0px; right: 100px;
}
</style>
</head>
<body>
<div>
첫번째<br>첫번째<br>첫번째<br>첫번째<br>첫번째<br>
첫번째<br>첫번째<br>첫번째<br>첫번째<br>첫번째<br>
첫번째<br>첫번째<br>첫번째<br>첫번째<br>첫번째<br>
</div>
<div class="pos"></div>
<div>
두번째<br>두번째<br>두번째<br>두번째<br>두번째<br>
두번째<br>두번째<br>두번째<br>두번째<br>두번째<br>
두번째<br>두번째<br>두번째<br>두번째<br>두번째<br>
두번째<br>두번째<br>두번째<br>두번째<br>두번째<br>
두번째<br>두번째<br>두번째<br>두번째<br>두번째<br>
두번째<br>두번째<br>두번째<br>두번째<br>두번째<br>
두번째<br>두번째<br>두번째<br>두번째<br>두번째<br>
두번째<br>두번째<br>두번째<br>두번째<br>두번째<br>
두번째<br>두번째<br>두번째<br>두번째<br>두번째<br>
두번째<br>두번째<br>두번째<br>두번째<br>두번째<br>
</div>
</body>
</html>
ISTJ의 재미없는 velog