position: fixed;
우선 div 박스 하나를 화면에 표시하고 body의 height를 100vh로 둔 후에 div 박스의 position을 fixed 로 설정하면 차이가 전혀 없는 것을 볼 수 있다. 그런데 아래 코드와 같이 body의 height를 1000vh 로 높히면 브라우저 화면에 scroll이 활성화되면서 브라우저의 높이가 매우 커진 것을 확인할 수 있는데 여기서 스크롤을 내려보면 div 박스가 화면에서 사라지는 것이 아니라 스크롤을 따라서 계속 정해진 위치에 보이게 된다.
<html>
<head>
<style>
body {
height: 1000vh;
margin: 20px;
}
div {
width: 300px;
height: 300px;
background-color: teal;
}
#second {
position: fixed;
background-color: khaki;
width: 350px;
}
</style>
</head>
<body>
<div>1</div>
<div id="second">2</div>
</body>
</html>위 코드를 보면 두 개의 div 박스가 있는데 #second 아이디를 가진 div 박스에만 position: fixed 를 주면 스크롤을 아래로 내릴 때 첫번째 div는 화면에서 점점 사라지지만 fixed된 두 번째(#second) 박스는 화면에 따라서 이동하면서 계속 정해진 위치에 보이게 된다.
아래 그림과 같이 보인다.
top, bottom, left, right
그런데 위의 코드를 실행해보면 처음에 박스들의 상태가 1 번 박스가 맨 위에 있고 2번 박스가 그 바로 아래 딱 붙어서 위치해있다. 이는 div 가 block 속성이기 때문에 새로운 줄에 2번 박스가 생긴 것이다. position이 fixed 되는 부분은 초기의 그 박스의 위치를 기준으로 한다. 그런데 이 위치를 속성을 추가함으로써 바꿔줄 수 있다.
위 코드에 #second 부분에 한 번 top: 5px 을 추가해보자. 원래는 같은 레이어에서 두 개의 박스가 맞붙어 보였는데 top 속성을 추가해주면서 1번 박스 위에 2번 박스가 놓인 것처럼 된다. 이제는 다른 레이어에서 보여지는 것이다.
이렇게 박스의 초기값을 top,left,right,bottom 을 이용해서 지정해 줄 수 있다.
출처: (https://nomadcoders.co)
